我正在设置一个项目列表,我有一个用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是“桌子”,列表项2是“椅子”,列表项3是“水”.在页面加载时,这些项目都将被隐藏.当我在搜索栏中输入字母时,一次只显示一个结果.

编辑：对不起,我忘了补充,说如果您输入“ item”,我希望它仅显示1个结果,这使得您必须大致搜索准确的术语.而不是显示所有项目.