jqueryでkeydownイベントのリストをフィルタリングする方法は？

あなたはどのようにjqueryの内のKeyDownイベントのリストをフィルタリングするために教えてくださいだろうか？私はここinputフィールドで を私のリストをフィルタリングするautocompleteを作りたい私のコードは私がjqueryでkeydownイベントのリストをフィルタリングする方法は？

https://jsbin.com/wamaficase/edit?html,js,output

$(function() { 
     $('#user').keyup(function (e) { 
      var $item =$('#item li'); 
      var val =this.value; 
      var $newItem =$item.filter(function (i,item) { 
       console.log($(item).text()) 
       return $(item).text().indexOf(val)!= -1; 
      }) 
      console.log($newItem) 
     }); 

    });

です更新されたリストをnewItemで表示する方法を変えるには？それはリスト

出典

2017-04-15 user944513

は、あなたがそれを実行しているときには、コンソール出力を見たことがありますか？ – Difster

はいそれはどのように表示するのですか？ – user944513

** keydown **イベントを使ってフィルタリングして更新するのですか？ –

でhello ,bhnm,chuy項目を表示する際、ユーザータイプh

を期待

私は入力したテキストを持っているものをレンダリングするために、それらのリストアイテムに隠されたクラスを切り替えるためのjQueryを使用していました。

$(function() { $('#user').keyup(function(e) { var $items = $('#item li'); var val = this.value; var $newItems = $items.each(function(i, item) { if (!val || $(item).text().indexOf(val) === -1) { $(item).addClass('hidden'); } else { $(item).removeClass('hidden'); } }) }); });

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> </head> <body> <div> <input type="text" id="user" /> </div> <ul id="item"> <li class='hidden'>hello</li> <li class='hidden'>pwny</li> <li class='hidden'>chuy</li> <li class='hidden'>myuio</li> <li class='hidden'>bhnm</li> <li class='hidden'>ssd</li> <li class='hidden'>iopo</li> </ul> </body> </html>

出典

2017-04-15 03:34:12 davidhu2000

なぜ 'フィルタが使われないのですか' – user944513

jqueryでkeydownイベントのリストをフィルタリングする方法は？

答えて

関連する問題