javascript 过滤搜索 <ul>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15597736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Filter search for <ul>
提问by Jaumesv
I have a list of users as well:
我也有一个用户列表：
<ul>
<li class="thumb selectable arrow light" style="margin-bottom:-5px;"
data-image="http://cdn.tapquo.com/lungo/icon-144.png">
<strong class="name">Peter <font data-count="0" style="position:relative;top:-2px;"> </font></strong>
<small class="description">Hi!</small>
</li>
...
</ul>
what I want is a text input each time you write a letter to display only users that start with that letter or that they might have the name. As I can do? It is with jquery but not as ...
我想要的是每次写信时输入的文本，以仅显示以该字母开头的用户或他们可能有姓名的用户。我能做什么？它与 jquery 一起使用，但不像...
回答by Daniel Imms
Here is a inputthat filters a <ul>based on the value in pure JavaScript. It works by handling the onkeyupand then getting the <li>s and comparing their inner element .namewith the filter text.
这是基于纯 JavaScript 中的值input过滤 a 的 a <ul>。它通过处理onkeyup然后获取<li>s 并将它们的内部元素.name与过滤器文本进行比较来工作。
var input = document.getElementById('input');
input.onkeyup = function () {
var filter = input.value.toUpperCase();
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
var name = lis[i].getElementsByClassName('name')[0].innerHTML;
if (name.toUpperCase().indexOf(filter) == 0)
lis[i].style.display = 'list-item';
else
lis[i].style.display = 'none';
}
}
