您能告诉我如何在 jquery 中过滤 keydown 事件上的列表吗？我想让 autocomplete 通过 input 字段过滤我的列表
这是我的代码
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 变量中获取更新后的列表，如何在 View 中显示？
预期结果
当用户输入 h 时，它会在列表中显示 hello ,bhnm,chuy 项
最佳答案
我使用 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>关于javascript - 如何过滤 jquery 中 keydown 事件的列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43421845/