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

如果您在输入上收听键盘事件，则每次键入或删除字母时，该功能都会调用。然后，您可以检查输入是否与任何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/

检测输入中输入的单词和字母，并使用相同的字母对其他元素（div中的文本）进行排序

1 个答案: