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

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

Answer 1

尝试一下

var li_count = 0;
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 = "";
            li_count++;
        } else {
            li[i].style.display = "none";
        }
        // Limit the displayed li
        if(li_count == 1) {
          break;
         }
    }
}

Answer 2

只需将样式显示添加到Base，然后在调用函数时对其进行更改。

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";
        }
    }
}

希望获得帮助。

Answer 3

我稍微清理了一下方法。

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

<input type="text" id="example" onkeyup="example2()" placeholder="Search.." title="example">

<ul id="example5">
    <li data-val="list item 1"  style="display:none"><a class="#" href="#" data-modal-id="#">list item 1</a></li>
    <li data-val="list item 2"  style="display:none"><a class="#" href="#" data-modal-id="#">list item 2</a></li>
    <li data-val="list item 3"  style="display:none"><a class="#" href="#" data-modal-id="#">list item 3</a></li>
    <li data-val="list item 4"  style="display:none"><a class="#" href="#" data-modal-id="#">list item 4</a></li>
</ul>

有什么办法可以使我的搜索结果列表一次只显示一个结果？

3 个答案: