$(this).hide() hides containers it shouldn't

Question

I have this little piece of code that filters through a list of results and hides the divs that don't match. I am writing this for a PhoneGap iOS application. It works fine on Android, but on iOS for some reason it hides the entire search field as well after typing a few characters, not just the results.

Any idea why? I've stripped it down to almost only the HTML code and jQuery and it's still happening. I tried commenting out the $(this).hide(); part and it stops hiding the search field, so I assume somehow that's the culprit, but I can't figure out why or how to fix this. Been at it for 10 hours straight. Any ideas? Maybe I can target the results some other way?

$('#box_search').keyup(function() {

  var valThis = $(this).val().toLowerCase();

  if (valThis == "") {
    $('#listing-results > .listing_container').show();

  } else {
    $('#listing-results > .listing_container').each(function() {    
      var text = ($(this).find('.listing_results_text_name').text() + $(this).find('.listing_results_text_name').data("alt")).toLowerCase();

      if (text.indexOf(valThis) >= 0) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  };
});

Answer 1

obviously I cant see the html but sometimes it helps to clean the code and just change the logic slightly

var box_search = function(e){

  var myIndex = $(this).val();
  val = (!myIndex || myIndex==='')?false:myIndex;

  if(!myIndex){
    $('#listing-results > .listing_container').show();
    return;
  }

  //
  $('#listing-results > .listing_container').each(function() {

    var text = $(this).find('.listing_results_text_name').text() + 
               $(this).find('.listing_results_text_name').data("alt")

    text = (!text || text==='')?false:text;

    text = text.toLowerCase();

    if(text.indexOf(myIndex.toLowerCase()) >= 0){
     $(this).show();
      return;
    }
    $(this).hide();
  });

} //end of function

$('.box_search').keyup(box_search);