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

概述我正在设置一个项目列表,我有一个用Javascript制作的搜索栏,它显示具有输入到搜索栏中的给定字符的项目.function example2() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById('example'); filt

我正在设置一个项目列表,我有一个用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  href="#" data-modal-ID="#">List item 1</a></li>    <li><a  href="#" data-modal-ID="#">List item 2</a></li>    <li><a  href="#" data-modal-ID="#">List item 3</a></li>    <li><a  href="#" data-modal-ID="#">List item 4</a></li></ul>

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

例如,列表项1是“桌子”,列表项2是“椅子”,列表项3是“水”.在页面加载时,这些项目都将被隐藏.当我在搜索栏中输入字母时,一次只显示一个结果.

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

最佳答案只需在ul中添加样式显示,然后在调用函数时进行更改即可.

function example2() {    var input,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" >    <li><a  href="#" data-modal-ID="#">List item 1</a></li>    <li><a  href="#" data-modal-ID="#">List item 2</a></li>    <li><a  href="#" data-modal-ID="#">List item 3</a></li>    <li><a  href="#" data-modal-ID="#">List item 4</a></li></ul>

希望能有所帮助. 总结

以上是内存溢出为你收集整理的Javascript-有没有办法让我的搜索结果列表一次只显示一个结果？ 全部内容，希望文章能够帮你解决Javascript-有没有办法让我的搜索结果列表一次只显示一个结果？ 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。