检测输入中输入的字和字母，并用相同的字母排序其他元素（div中的文本） [英] Detect words and letters typed in input and sort other elements (text in div) with same letters

问题描述

我想进行输入，在其中输入单词或字母来排序某种元素。例如：有div在其中有不同的单词，当你在输入中输入的东西立即排序与输入中有相同字母的div ...

I want to make an input, in which you type words or letters to sort some kind of elements. For example: there are divs with different words in them, and when you type something in the input immediately sort the divs which have the same letters as in the input...

<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>

推荐答案

如果你听输入的keyup事件，该函数将在每次键入或删除一个字母时调用。

If you listen for the keyup event on the input, the function will call every time you type or remove a letter. You can then check if the input matches any of the divs' value, and hide/show it based on that.

$('#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/

You can test it in this fiddle: http://jsfiddle.net/h9sck2nh/1/

这篇关于检测输入中输入的字和字母，并用相同的字母排序其他元素（div中的文本）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！