我也有一个用户列表:
<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但不是......
答案 0 :(得分:31)
以下input
根据纯JavaScript中的值过滤<ul>
。它的工作原理是处理onkeyup
,然后获取<li>
并将其内部元素.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';
}
}
答案 1 :(得分:0)
所以你在一个像这样的无序列表中有一个列表项的集合。
<div class="some-input-field-class">
<input type="text" name="filter" id="filter">
<label for="filter">Filter Names</label>
</div>
<ul class="my-user-collection">
<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>
您可以将其添加到您的 javascript 文件中。但是您也需要加载事件侦听器。您可能有一些事件,所以只做您需要做的事情。也许将它添加到另一个函数中,您可以在其中加载其余的事件侦听器。
// Load the event listener
document.querySelector('#filter').addEventListener('keyup', filterNames);
通过以类为目标来遍历 li 的函数,遍历数组,因为我们使用 querySelectorAll 而不是 getElementByID。 -1 表示不匹配。
function filterNames(e) {
const text = e.target.value.toLowerCase();
document.querySelectorAll('.selectable').forEach(
function(name) {
let item = name.firstChild.textContent;
if (item.toLowerCase().indexOf(text) != -1) {
name.style.display = 'block';
} else {
name.style.display = 'none';
}
}
);
}