Question

我在点击输入标签时创建了一个列表。现在我想在输入标签上输入时过滤数据并且发生了taht，但是在选择一个数据后，过滤不会从第二个数据开始。

我的过滤器代码。

function filterList(value, list) {
        var li, i, match;

        for (i = list.children.length; i--;) {
            li = list.children[i];
            match = li.textContent.toLowerCase().indexOf(value.toLowerCase()) > -1;
            li.classList.toggle('hidden', !match)
        }
    }

我面临的问题很少。任何人都可以帮我解决这个问题。我创造了一个小提琴手，你可以看到问题.. Fiddle

从第二个数据开始不会进行过滤。
一旦从密钥中放置一些数据，然后从列表中选择一些值，两个值都将到来。

Answer 1

你在引号之间添加了一个空格

li[i].style.display = " ";

所以只需删除该空格即可正常使用

li[i].style.display = "";

因为您打算在输入字段中添加所选字段
（which is some thing like how you add tags in stackoverflow或其他一些网站）

你可以找到类似的答案here
并在那里阅读评论，因为有人提到与GitHub

相关联的图书馆

Answer 2

嗯......我们只是说你的代码有很多问题。

首先，始终保持控制台开启。

for (i = list.children.length; i--;) {
    li = list.children[i];
    match = li.textContent.toLowerCase().indexOf(value.toLowerCase()) > -1;
    li.classList.toggle('hidden', !match)
}

您的for循环已经在数组索引之外启动。更不用说你把步骤部分放在条件部分了。

在这种情况下，使用for.. of可以更好地工作。

其次，你将一个类应用于没有效果的li，因为你还没有在css中定义它。

第三，我不确定为什么你将显示/隐藏逻辑放在openList函数中，没有任何意义。

for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = " ";
    } else {
        li[i].style.display = "none";
    }
}

这是一个工作/更新的小提琴。 https://jsfiddle.net/kLaeyt5L/2/

在HTML列表中没有发生过滤

2 个答案: