檢測輸入中輸入的單詞和字母，並使用相同的字母對其他元素（div中的文本）進行排序

Question

我想輸入一個輸入，在其中鍵入單詞或字母來排序某些元素。例如：有不同的詞的div在其中，而當你在輸入型的東西馬上具有相同字母輸入的div

<input type="text" placeholder="Sort by..."> 

<div class="sortable-items"> 
    <div>dogs</div> 
    <div>cats</div> 
    <div>dogs</div> 
    <div>dogs</div> 
    <div>cats</div> 
    <div>cats</div> 
    <div>dogs</div> 
</div> 

Answer 1

如果你聽的keyup事件排序...在輸入時，每次鍵入或刪除一個字母時，函數都會調用。然後，您可以檢查輸入是否與任何div的值匹配，並根據該值隱藏/顯示。

$('#search').keyup(function(){ 
    var searchTerm = $(this).val(); 
    $(".sortable-items div").each(function(){ 
     if($(this).text().match(searchTerm)){ 
      $(this).show(); 
     }else{ 
      $(this).hide(); 
     } 
    }); 
}); 

您可以在此小提琴測試：http://jsfiddle.net/h9sck2nh/1/