时间戳

首页 > 解决方案 > 如何隐藏列表项过滤html搜索框

jquery - 如何隐藏列表项过滤html搜索框

问题描述

如何从过滤器 html 搜索框中隐藏列表项。

例如，它仅在我单击搜索框时才显示项目，然后显示项目列表

否则以正常方式隐藏列表项。

如果有人可以纠正这个请。

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
      box-sizing: border-box;
    }

    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 12px;
      background-repeat: no-repeat;
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }

    #myUL {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    #myUL li a {
      border: 1px solid #ddd;
      margin-top: -1px; /* Prevent double borders */
      background-color: #f6f6f6;
      padding: 12px;
      text-decoration: none;
      font-size: 18px;
      color: black;
      display: block
    }

    #myUL li a:hover:not(.header) {
      background-color: #eee;
    }
    </style>
    </head>
    <body>

    <h2>My Phonebook</h2>

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

    <ul id="myUL">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>
      <li><a href="#">Billy</a></li>
      <li><a href="#">Bob</a></li>
      <li><a href="#">Calvin</a></li>
      <li><a href="#">Christina</a></li>
      <li><a href="#">Cindy</a></li>
    </ul>

    <script>
    function myFunction() {
        var input, filter, ul, li, a, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
    </script>

    </body>
    </html>

如果有人可以纠正这个请。

标签： jqueryhtmlcss

解决方案

您可以做的只是在 DOM 准备好后隐藏 UL el，然后在输入字段设置为焦点时显示列表。使用 jquery 在下面尝试此代码。

 $(function(){
  $('#myUL').hide();
  $('#myInput').on('focus',function(){
    $('#myUL').show();
  });
})

推荐阅读