我需要你的帮助。
我如何在现有代码中添加一些功能,以便我能够使用输入框在ul列表中搜索,并自动突出显示每个匹配项,就像(查找-当您键入)样式的搜索一样?
我喜欢使用jQuery :)
对于那些想要测试的人,这里是一个fiddle:http://jsfiddle.net/83sPQ/1/
以下是标记:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
#refdocs {
border: 0;
width: 100%;
height: auto;
padding-left: 2px;
}
#refdocs_main {
border: 1px solid rgb(170,170,170);
width: 179px;
overflow: hidden;
margin-top: 1px;
}
#refdocs_input{
border-bottom: 1px solid rgb(170,170,170);
height: 20px;
}
#refdocs_wrapper{
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
}
#refdocs_list {
width: 100%;
}
#refdocs_list ul {
margin: 0;
padding: 0px;
list-style-type: none;
}
#refdocs_list li {
cursor: default;
padding: 2px;
}
.selected {
background: rgb(228,228,228);
}
</style>
<script type="text/javascript">
window.onload = function() {
$('#refdocs_list ul li').click(function () {
$('#refdocs_list ul li').removeClass('selected');
$(this).addClass('selected');
document.getElementById('refdocs').value = $(this).text()
});
}
</script>
</head>
<body>
<div id="refdocs_main">
<div id="refdocs_input"><input type="text" id="refdocs"></div>
<div id="refdocs_wrapper">
<div id="refdocs_list">
<ul>
<li>9094203</li>
<li>9279863</li>
<li>9023698</li>
<li>8993127</li>
<li>9037891</li>
<li>(red)</li>
<li>tiger</li>
<li>The lion</li>
<li>Ted</li>
</ul>
</div>
</div>
</div>
</body>
</html>
keydown
事件?你尝试过什么来完成你的任务? - undefined$('#refdocs').on('keyup', function() { var val = $(this).val(); $('#refdocs_list li').each(function() { $(this).toggle(!!$(this).text().match(val)); }); });
- undefinedli
,检查它是否匹配该值,将结果转换为布尔值,并将其传递给toggle函数。 - undefined