javascript - 检测输入中输入的单词和字母，并对具有相同字母的其他元素(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();
        }
    });
});

您可以在这个 fiddle 中测试它:http://jsfiddle.net/h9sck2nh/1/