javascript - jQuery Mobile 搜索隐藏搜索选项

Question

在输入某些内容之前，我不希望显示任何搜索内容。我将类隐藏，然后在搜索项目时使用 .show() ，但是它不起作用。

演示：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();

});


});

Answer 1

这是您可能正在寻找的东西jsFiddle 示例

我只是有点添加到您的代码中，所以我没有很好地格式化它。您可以改回.slideUp()and .slideDown()。我只是更喜欢他们。

$('#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);

 });

});