2017-11-12 14 views
1

私は試してみてください。このコード短絡リスト項目

$(".search").on("input",function() { 
    var $li = $("#design li"), text = $li.text(); 
    $li.toggle(text.indexOf(this.value)==0); // or != -1 for anywhere in text 
}); 
+0

私は個人的にはjQuery UIの 'autocomplete'プラグインを使用します。次をご覧ください:https://jqueryui.com/autocomplete/ – Airwavezx

+0

私は以下のリストを短縮する必要があります –

答えて

0

を使用して入力ボックスに任意の単語を書くとき、私は、リスト項目のショートにしたいです<datalist>:HTML5の

HTML <datalist>要素コ他のコントロールで使用可能な値を表す<option>要素のセットがあります。この場合の

<input list="names" name="design" id="design" placeholder="Search"> 
 
<datalist id="names"> 
 
    <option value="Manish"> 
 
    <option value="Rahul"> 
 
    <option value="Ankit"> 
 
    <option value="Kapil"> 
 
    <option value="Nisha"> 
 
    <option value="Somiya"> 
 
    <option value="Lovely"> 
 
    <option value="Hashim"> 
 
    <option value="Rihana"> 
 
</datalist>

1

あなたが機能を取ることができるのjqueryのか、他の言語

<div class="container"> 
<form> 
    <label id="stylem">Name</label> 
    <input class="search" placeholder="Search" /> 
</form> 

<div id="design"> 
    <ul> 
     <li>Manish</li> 
     <li>Rahul</li> 
     <li>Ankit</li> 
     <li>Kapil</li> 
     <li>Nisha</li> 
     <li>Somiya</li> 
     <li>Lovely</li> 
     <li>Hashim</li> 
     <li>Rihana</li> 
    </ul> 
</div> 
<br/> 
<br/> 
</div>