Jquery搜索過濾器相同的ul li列表

Question

我有 ul li 也在同一個 li 列表中列出了搜索過濾器 div 並且那些是動態出現的，所以當我過濾 li 列表時，頁面上有多個 ul li 列表，它不工作或過濾列表

我的代碼

<ul>
<li><div><input class="FilterSearch" type="text"/></div></li>
<li>Abc</li>
<li>rtp</li>
<li>mht</li>
<li>Abc</li>
<li>weq</li>
<li>pio</li>
<li>cca</li>
<li>asas</li>
</ul>


$(document).on("input propertychange paste change", '.FilterSearch', function (e) {
        var value = $(this).val().toLowerCase();
        $(this).parent().siblings().find('li').filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });

    });

Answer 1

您input父級是div並且它沒有兄弟姐妹。 因此，搜索父母ul元素並找到所有li但不是您input的第一個元素

$(this).parents("ul").find('li:not(li:first-of-type)').filter(function() {

 $(document).on("input propertychange paste change", '.FilterSearch', function(e) { var value = $(this).val().toLowerCase(); $(this).parents("ul").find('li:not(li:first-of-type)').filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <div><input class="FilterSearch" type="text" /></div> </li> <li>Abc</li> <li>rtp</li> <li>mht</li> <li>Abc</li> <li>weq</li> <li>pio</li> <li>cca</li> <li>asas</li> </ul>

Answer 2

您可以使用以下邏輯，您可以先隱藏所有li ，然后filter每個 li 並僅在包含搜索文本時顯示它。

 $(document).on("input propertychange paste change", '.FilterSearch', function(e) { var value = $(this).val().toLowerCase(); var $ul = $(this).closest('ul'); //get all lis but not the one having search input var $li = $ul.find('li:gt(0)'); //hide all lis $li.hide(); $li.filter(function() { var text = $(this).text().toLowerCase(); return text.indexOf(value)>=0; }).show(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <div><input class="FilterSearch" type="text" /></div> </li> <li>Abc</li> <li>rtp</li> <li>mht</li> <li>Abc</li> <li>weq</li> <li>pio</li> <li>cca</li> <li>asas</li> </ul>