Question

我正在使用html在我的网站上进行搜索，但是我不了解如何使用JavaScript将display更改为none。

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

<div class="search">
    <input type="text" id="myInput" onkeyup="search()" placeholder="Search.." title="Type in a name">

    <ul id="myUL">
        <li class="search_li"><a class="search_link" href="#about-me">About Me</a></li>
        <li class="search_li"><a class="search_link" href="#">Agnes</a></li>

        <li class="search_li"><a class="search_link" href="#">Billy</a></li>
        <li class="search_li"><a class="search_link" href="#">Bob</a></li>

        <li class="search_li"><a class="search_link" href="#">Calvin</a></li>
        <li class="search_li"><a class="search_link" href="#">Christina</a></li>
        <li class="search_li"><a class="search_link" href="#">Cindy</a></li>
    </ul>
</div>

Answer 1

这是一个解决方案：注意&& filter，以确保输入具有值，并调用准备好将其隐藏的页面上的函数；）

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

<div class="search">
    <input type="text" id="myInput" onkeyup="search()" placeholder="Search.." title="Type in a name">

    <ul id="myUL">
        <li class="search_li"><a class="search_link" href="#about-me">About Me</a></li>
        <li class="search_li"><a class="search_link" href="#">Agnes</a></li>

        <li class="search_li"><a class="search_link" href="#">Billy</a></li>
        <li class="search_li"><a class="search_link" href="#">Bob</a></li>

        <li class="search_li"><a class="search_link" href="#">Calvin</a></li>
        <li class="search_li"><a class="search_link" href="#">Christina</a></li>
        <li class="search_li"><a class="search_link" href="#">Cindy</a></li>
    </ul>
</div>

Answer 2

在一条评论中，您说过您希望在文本字段为空时不显示任何列表项。只需默认为display: none，并在找到匹配项时将其覆盖即可。

只需最少的更改即可做到：

function search() {
    var input            =               document.getElementById("myInput");
    var filter           =               input.value.toUpperCase();
    var ul               =               document.getElementById("myUL");
    var li               =               ul.getElementsByTagName("li");


    for (i = 0; i < li.length; i++) {

        var a             =            li[i].getElementsByTagName("a")[0];
        var txtValue      =            a.textContent || a.innerText;

        // You could also use .toggle, but sadly IE11 doesn't
        // support the second arg (grrr)
        if (filter && txtValue.toUpperCase().indexOf(filter) > -1) {
        
            li[i].classList.add("show");
        } 
        else {
            li[i].classList.remove("show");
        }
    }
}

#myUL li {
  display: none;
}
#myUL li.show {
  display: block;
}

<div class="search">
    <input type="text" id="myInput" onkeyup="search()" placeholder="Search.." title="Type in a name">

    <ul id="myUL">
        <li class="search_li"><a class="search_link" href="#about-me">About Me</a></li>
        <li class="search_li"><a class="search_link" href="#">Agnes</a></li>

        <li class="search_li"><a class="search_link" href="#">Billy</a></li>
        <li class="search_li"><a class="search_link" href="#">Bob</a></li>

        <li class="search_li"><a class="search_link" href="#">Calvin</a></li>
        <li class="search_li"><a class="search_link" href="#">Christina</a></li>
        <li class="search_li"><a class="search_link" href="#">Cindy</a></li>
    </ul>
</div>

正如我在上面的评论中提到的那样，如果不需要支持Internet Explorer，则可以使用toggle代替add和remove。您还可以在现代浏览器中使用字符串的includes。所以：

li.classList.toggle("show", filter && txtValue.toUpperCase().includes(filter));

不过，我会进行更多更改：

声明i
使用现代事件处理
使用input事件，而不是keyup
不要使search成为全局函数
使用querySelectorAll

有了这些更改：

// Scoping function so we don't create a global
(function() {
    // Hook up the search
    var input = document.getElementById("myInput");
    input.addEventListener("input", search);
    
    function search() {
        var input  = document.getElementById("myInput");
        var filter = input.value.toUpperCase();
        var items  = document.querySelectorAll("#myUL li");

        for (var i = 0; i < items.length; i++) {
            var li        = items[i];
            var a         = li.querySelector("a");
            var txtValue  = (a.textContent || a.innerText).toUpperCase();

            if (filter && txtValue.indexOf(filter) > -1) {
                li.classList.add("show");
            } else {
                li.classList.remove("show");
            }
        }
    }
})();

#myUL li {
  display: none;
}
#myUL li.show {
  display: block;
}

<div class="search">
    <input type="text" id="myInput" placeholder="Search.." title="Type in a name">

    <ul id="myUL">
        <li class="search_li"><a class="search_link" href="#about-me">About Me</a></li>
        <li class="search_li"><a class="search_link" href="#">Agnes</a></li>

        <li class="search_li"><a class="search_link" href="#">Billy</a></li>
        <li class="search_li"><a class="search_link" href="#">Bob</a></li>

        <li class="search_li"><a class="search_link" href="#">Calvin</a></li>
        <li class="search_li"><a class="search_link" href="#">Christina</a></li>
        <li class="search_li"><a class="search_link" href="#">Cindy</a></li>
    </ul>
</div>

Answer 3

如果条件错误：使用filter && txtValue.toUpperCase().indexOf(filter) > -1仅在filter不是虚假（可能为空字符串）并且在filter中找不到txtValue的情况下才为真

function search(e) {
  var input = e.target;
  var filter = input.value.toUpperCase();
  var ul = document.getElementById("myUL");
  var li = ul.getElementsByTagName("li");

  console.clear()
  for (i = 0; i < li.length; i++) {

    var a = li[i].getElementsByTagName("a")[0];
    var txtValue = a.textContent || a.innerText;

    if (filter && txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "block";
    } else {
      li[i].style.display = "none";
    }
  }
}

document.getElementById('myInput').addEventListener('input', search);

#myUL .search_li {
  display: none;
}

<div class="search">
  <input type="text" id="myInput" placeholder="Search.." title="Type in a name">

  <ul id="myUL">
    <li class="search_li"><a class="search_link" href="#about-me">About Me</a></li>
    <li class="search_li"><a class="search_link" href="#">Agnes</a></li>

    <li class="search_li"><a class="search_link" href="#">Billy</a></li>
    <li class="search_li"><a class="search_link" href="#">Bob</a></li>

    <li class="search_li"><a class="search_link" href="#">Calvin</a></li>
    <li class="search_li"><a class="search_link" href="#">Christina</a></li>
    <li class="search_li"><a class="search_link" href="#">Cindy</a></li>
  </ul>
</div>

Answer 4

您的代码运行正常，您只需要像这样添加事件监听器即可： document.getElementById('myInput').addEventListener('keyup', search)函数定义之后的search()，并从html中删除onkeyup="search()"

Answer 5

在循环结束时添加此条件

if(filter==='' || filter===undefined){
    li[i].style.display = "none";
}

输入为空时更改<li>的样式

5 个答案: