檢測輸入中鍵入的單詞和字母，並對具有相同字母的其他元素（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/