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

を向上させるために使用することができますtoLowerCase()とincludes()メソッドを実装しますそれらを並べ替える。あなたはその質問を明確にすることができますか？ –

良い通知！おかげでx） – nehel

jQueryがfilter秒を提供し、Javascriptを使用すると、アイテムをフィルタ処理しようとしているされていませんが、あなたのコードの後にあなたのコード

<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動的フィルタリスト

答えて

関連する問題