Question

这是一个简单的可过滤名单。现在，当我实际使用输入过滤时，我必须输入＆＃39; Ad＆＃39;或者＆＃39; am＆＃39;得到亚当＆＃39;。但是如何做到这一点让我可以得到亚当＆＃39;通过类似于＆＃39; dm＆＃39;或者＆＃39; da＆＃39;？

＆＃13;

document.getElementById('myInput').addEventListener('keyup', filterList);

function filterList() {

    let filterValue = document.getElementById('myInput').value.toUpperCase();

    let li = document.getElementsByTagName('li');

    for (let i = 0; i < li.length; i++) {

        if (li[i].getElementsByTagName('a')[0].innerHTML.toUpperCase().indexOf(filterValue) > -1) {

            li[i].style.display = '';
        } else {

            li[i].style.display = 'none';
        }
    }
}

＆＃13;

Answer 1

听起来你想要模糊搜索。您可以使用一些库来完成此任务。这里有几个：

Answer 2

您可以通过首先确定需要查找的每个不同字符的数量来完成此操作，并按该字符键入。然后对于每个这样的不同字符，看看你是否可以在目标字符串中多次找到它，使用indexOf的第二个参数（以避免重复计算）。

通过一些其他更改和优化，您的代码可能如下所示：

＆＃13;

document.getElementById('myInput').addEventListener('input', filterList);

function matches(charCounts, s) {
    s = s.toUpperCase();
    for (let [ch, count] of Object.entries(charCounts)) {
        for (let i = -1; count--; ) {
            i = s.indexOf(ch, i + 1);
            if (i < 0) return false;
        }
    }
    return true;
}

function filterList() {
    const filterValue = document.getElementById('myInput').value.toUpperCase(),
        anchors = document.querySelectorAll('li > a:first-child'),
        charCounts = filterValue.split('').reduce( (acc, ch) => {
            acc[ch] = (acc[ch] || 0) + 1;
            return acc;
        }, {} );
    for (const a of anchors) {
        a.parentNode.style.display = matches(charCounts, a.textContent) ? '' : 'none';
    }
}

＆＃13;

<input id="myInput"><br>
<ul>
    <li><a>Adam</a></li>
    <li><a>Eve</a></li>
    <li><a>Abel</a></li>
    <li><a>Cain</a></li>
    <li><a>Seth</a></li>
</ul>

＆＃13;

使用Vanilla JavaScript的可过滤列表

2 个答案: