在jQuery中進行實時搜索

Question

我試圖構建一個模仿實時搜索的頁面 - 搜索結果以用戶類型顯示。下面的插件運行良好，除了我想在開始時隱藏結果（有序列表）並將每個匹配的項目符號顯示爲用戶類型。

http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/

jQuery的

$(document).ready(function(){ 
$("#filter").keyup(function(){ 

    // Retrieve the input field text and reset the count to zero 
    var filter = $(this).val(), count = 0; 

    // Loop through the comment list 
    $(".commentlist li").each(function(){ 

     // If the list item does not contain the text phrase fade it out 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
      $(this).fadeOut(); 

     // Show the list item if the phrase matches and increase the count by 1 
     } else { 
      $(this).show(); 
      count++; 
     } 
    }); 

    // Update the count 
    var numberItems = count; 
    $("#filter-count").text("Number of Comments = "+count); 
}); 

}）;

HTML

<form id="live-search" action="" class="styled" method="post"> 
    <fieldset> 
     <input type="text" class="text-input" id="filter" value="" /> 
    </fieldset> 
</form> 

<ol class="commentlist"> 
    <li>Comment #1</li> 
    <li>Comment #2</li> 
</ol> 

任何幫助表示讚賞。

Answer 1

如果評論已預先加載，您可以通過兩種方式初始隱藏它。

1. 調用$（ 'commentlist禮'）。隱藏（）在DOM準備

2. 添加風格.commentlist li { display: none}

另一個小的調整，我建議是創建一個正則表達式變量外循環語句

$(document).ready(function(){ 
    $("#filter").keyup(function(){ 

     // Retrieve the input field text and reset the count to zero 
     var filter = $(this).val(), count = 0; 
     if(!filter){ // hide is no text 
      $(".commentlist li").hide(); 
      return; 
     } 

     var regex = new RegExp(filter, "i"); // Create a regex variable outside the loop statement 

     // Loop through the comment list 
     $(".commentlist li").each(function(){ 

      // If the list item does not contain the text phrase fade it out 
      if ($(this).text().search(regex) < 0) { // use the variable here 
       $(this).hide(); 

      // Show the list item if the phrase matches and increase the count by 1 
      } else { 
       $(this).show(); 
       count++; 
      } 
     }); 

     // Update the count 
     var numberItems = count; 
     $("#filter-count").text("Number of Comments = " + count); 
    }); 
}); 

演示：Fiddle

可以很明顯的使用動畫像fadeIn('slow')和fadeOut('slow')代替show()和hide()動畫項目的顯示，它在我看來，它是好看盡可能多的項目將一起動畫。

Answer 2

在CSS中添加

.commentlist li{display:none;} 

然後在您的JS，第一，如果

if(filter == 0){$(this).fadeOut();} 

然後在最後，而不是$（本）.show（）加$（本）.fadeIn （ '慢'）

$(this).fadeIn('slow'); 

更新後的代碼在這裏：http://tinyurl.com/a972s6t

Answer 3

這應該爲你做它：

$(document).ready(function(){ 
    $('#filter').keyup(function() { 
     var f = $(this).val(); 
     var regex = new RegExp(f, 'gi'); 

     $('.commentlist li').hide() 
      .each(function() { 
       if($(this).html().match(regex)) { 
        $(this).show(); 
       } 
      }); 
    }); 
}); 

如果你想淡出動畫：在動作腳本的

$(document).ready(function(){ 
    $('#filter').keyup(function() { 
     var f = $(this).val(); 
     var regex = new RegExp(f, 'gi'); 

     $('.commentlist li').fadeOut() 
      .each(function() { 
       if($(this).html().match(regex)) { 
        $(this).stop().show(); 
       } 
      }); 
    }); 
}); 

演示：http://www.glow-raspberry.com/where-to-buy。例如，輸入「plaza」。