CODEWITHSUNDEEP
javascriptjqueryhtmlsearchmobile
nshah
nshah

Reputation: 597

jQuery Mobile Search Hide Search Options

I want none of the search things to be shown until something is typed in. I made the class hidden and then used .show() when the item is searched up, however it is not working.

Demo: http://jsfiddle.net/DyYFb/207/

JS:

$("#search").keyup(function(){

var SEARCHWORD = this.value;
$("#list li").each(function(){

    if($(this).
          find("h3, p").
          text().toUpperCase().
          indexOf(SEARCHWORD.toUpperCase()) >=0)
   $(this).show();
    else
   $(this).hide();

});


});

Upvotes: 0

Views: 129

Answers (1)

James
James

Reputation: 1572

here is something that you might be looking for jsFiddle Example

I just kinda added to your code so I didn't format it well. You can change back the .slideUp() and .slideDown(). I just like them better.

$('#list li').hide(0); //Hide the elements initially

$("#search").keyup(function(){

    var SEARCHWORD = $.trim(this.value);

    if(SEARCHWORD === ""){            //Checks if Search Term is Nothing and starts over
        $('#list li').slideUp(150); 
        return false;
    } 

    $("#list li").each(function(){

    if($(this).
          find("h3, p").
          text().toUpperCase().
          indexOf(SEARCHWORD.toUpperCase()) >=0)
     $(this).slideDown(150);
    else
      $(this).slideUp(150);

 });

});

Upvotes: 1

Related Questions