过滤搜索< ul> [英] Filter search for <ul>
本文介绍了过滤搜索< ul>的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我也有一个用户列表:
<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>
我想要的是每次您写字母时仅显示以该字母开头或可能具有名称的用户的文本输入.可以吗它与jquery一起使用,但不与...
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 ...
推荐答案
这里是一个input
,它基于纯JavaScript中的值过滤<ul>
.它通过处理onkeyup
然后获取<li>
并将其内部元素.name
与过滤器文本进行比较来工作.
Here is a input
that filters a <ul>
based on the value in pure JavaScript. It works by handling the onkeyup
and then getting the <li>
s and comparing their inner element .name
with the filter text.
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';
}
}
这篇关于过滤搜索< ul>的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文