jquery動態篩選器列表

我試圖在keypress上生成篩選器列表。例如，如果我在輸入"It"中寫入，則與此輸入值不匹配的元素將被隱藏。我不確定下面的代碼是否適合這項工作。任何提示將不勝感激！jquery動態篩選器列表

$('ul li ul li').addClass('displayNone'); 
 

 
var geInputValue = $('input').val(); 
 
var getInputLength = $('input').length; 
 

 
function sortDynamically(){ 
 
    $('input').on('keypress', function(){ 
 
    for(var i=0; i < getInputLength; i++){ 
 
     if(getInputValue === $('li').text){ 
 
     // remove everything that doesnt match input value 
 
     $('li').siblings().addClass('displayNone'); 
 
     } 
 
     else{ 
 
     $('li').siblings().removeClass('displayNone'); 
 
    }); 
 
} 
 
    
 
sortDynamically();

ul, li{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.displayNone{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<ul class="list"> 
 
    <li>Item</li> 
 
    <li>Product 
 
    <ul> 
 
     <li>Bike</li> 
 
    </ul> 
 
    </li> 
 
    <li>About</li> 
 
</ul>

來源

2016-04-23 nehel

按照你的代碼試圖篩選項目，但不對它們進行排序。你能澄清這個問題嗎？ –

注意！謝謝x） – nehel

jQuery提供filter S和JavaScript的執行toLowerCase()和includes()方法，你可以用它來改善你的代碼

<body> 
    <style> 
     .displayNone 
     { 
      display: none; 
     } 
    </style> 
    <input type="text" id="input-filter"/> 
    <ul class="list"> 
     <li>Item</li> 
     <li>Product 
      <ul> 
       <li>Bike</li> 
      </ul> 
     </li> 
     <li>About</li> 
    </ul> 
    <script> 
     var items = $('ul.list li'); 
     $('#input-filter').on('input', function ($event) 
     { 
      items.addClass('displayNone').filter(function (item) 
      { 
       return $(this).text().toLowerCase().includes($($event.target).val().toLowerCase()); 
      }).removeClass('displayNone'); 
     }); 
    </script> 
</body>

來源

2016-04-23 10:43:29

這是一個很好的觀點。 – nehel

根據您鍵入的內容此代碼過濾器。如果文本輸入中沒有任何內容，則顯示所有內容。

$('input').on('keypress keyup', function(){ 
 
    var value = $(this).val().toLowerCase(); 
 
    if (value != '') { 
 
    
 
     $('.list > li').each(function() { 
 
     if ($(this).text().toLowerCase().indexOf(value) > -1) { 
 
      $(this).removeClass('displayNone'); 
 
     } else { 
 
      $(this).addClass('displayNone'); 
 
     } 
 
     }); 
 
    } else { 
 
     $('.list > li').removeClass('displayNone'); 
 
    } 
 
});

ul, li{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.displayNone{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<ul class="list"> 
 
    <li>Item</li> 
 
    <li>Product 
 
    <ul> 
 
     <li>Bike</li> 
 
    </ul> 
 
    </li> 
 
    <li>About</li> 
 
</ul>

來源

2016-04-23 10:25:33 AKS

我明白了，非常感謝！ – nehel

jquery動態篩選器列表

回答

相關問題