javascript - 有没有办法让我的搜索结果列表一次只显示一个结果？

Question

我正在设置一个元素列表，我有一个用 Javascript 制作的搜索栏，它显示具有我在搜索栏中输入的给定字符的元素。

function example2() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("example");
    filter = input.value.toUpperCase();
    ul = document.getElementById("example5");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

<input type="text" id="example" onkeyup="example2()" placeholder="Search.." title="example">

<ul id="example5">
    <li><a class="#" href="#" data-modal-id="#">list item 1</a></li>
    <li><a class="#" href="#" data-modal-id="#">list item 2</a></li>
    <li><a class="#" href="#" data-modal-id="#">list item 3</a></li>
    <li><a class="#" href="#" data-modal-id="#">list item 4</a></li>
</ul>

我想做的是，当页面加载时，所有列表项都被隐藏。然后，当我搜索时，它只显示 1 个结果，而不显示多个结果。

例如，列表项 1 是“ table ”，列表项 2 是“椅子”，列表项 3 是“水”。在页面加载时，这些元素将全部隐藏。当我在搜索栏中输入一个字母时，一次只显示一个结果。

编辑:对不起，我忘了补充，如果你输入“item”，我希望它只显示 1 个结果，这让你必须搜索大致准确的词。而不是显示所有元素。

Answer 1

只需向 ul 添加样式显示，然后在调用函数时更改它。

function example2() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("example");
    filter = input.value.toUpperCase();
    ul = document.getElementById("example5");
    ul.style.display = "block";
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

<input type="text" id="example" onkeyup="example2()" placeholder="Search.." title="example">

<ul id="example5" style="display:none">
    <li><a class="#" href="#" data-modal-id="#">list item 1</a></li>
    <li><a class="#" href="#" data-modal-id="#">list item 2</a></li>
    <li><a class="#" href="#" data-modal-id="#">list item 3</a></li>
    <li><a class="#" href="#" data-modal-id="#">list item 4</a></li>
</ul>

希望这对您有所帮助。