如何過濾jquery中的keydown事件列表？

請你告訴我如何在jQuery中的keydown事件過濾器列表？我想打autocomplete由input場 這裏來篩選我的名單是我的代碼如何過濾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變量如何顯示在視圖中？

進出料

當用戶類型h它在列表

來源

2017-04-15 user944513

你看控制檯輸出，當你運行它？ – Difster

是的，它播種'三''李'，但如何顯示這 – user944513

你的意思是過濾它，並使用** keydown **事件更新它？ –

我用jQuery來對這些列表項切換一個隱藏的類，只渲染那些具有鍵入的文本顯示hello ,bhnm,chuy項目。

$(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事件列表？

回答

相關問題