logo标签列表

如何在HTML搜索框中隐藏列表项过滤器

jqueryhtmlcss
3
如何从筛选HTML搜索框中隐藏列表项。
例如，只有当我点击搜索框时才显示项目列表， 否则在正常情况下隐藏列表项。
  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy
  • kandy
  • lakum
  • kool
  • moon
  • noon
如果有人能纠正这个，请帮忙。
 <!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>

如果有人能纠正这个，请帮忙。

5个回答
0

现在你应该可以了

<!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>
var UL = document.getElementById("myUL");
// hilde the list by default
UL.style.display = "none";

var searchBox = document.getElementById("myInput");

// show the list when the input receive focus
searchBox.addEventListener("focus",  function(){
    // UL.style.display = "block";
});

// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
    UL.style.display = "none";
});


function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    ul = document.getElementById("myUL");
    filter = input.value.toUpperCase();
    // if the input is empty hide the list
    if(filter.trim().length < 1) {
        ul.style.display = "none";
        return false;
    } else {
        ul.style.display = "block";
    }
    
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        
        // This is when you want to find words that contain the search string
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        li[i].style.display = "";
     } else {
        li[i].style.display = "none";
    } 
    
    // This is when you want to find words that start the search string
    /*if (a.innerHTML.toUpperCase().startsWith(filter)) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }*/
    }
}
</script>

</body>
</html>
1
首先非常感谢您的帮助，您的更正接近我的问题，但仍有问题。当我点击搜索框时，它显示很多单词，请解决这个问题，使得当我在搜索框中输入单词时，只显示那些单词列表。 - mibrahim
这会完全隐藏列表。因此，当您搜索时，它不会显示可能的匹配项。 - ProsperousHeart
0
你可以在DOM准备就绪后隐藏UL元素，然后在输入字段设置为焦点时显示列表。使用jQuery尝试下面的代码。
 $(function(){
  $('#myUL').hide();
  $('#myInput').on('focus',function(){
    $('#myUL').show();
  });
})
0
如果您参考您的“myUL”： - 为每个列表项添加一个类
<li class='people'>Adele</li>)

然后添加一个 CSS 组件，以默认隐藏列表

  • .people { display: none;}

在 JavaScript 中： 更改此部分：

if (a.innerHTML.toUpperCase().indexOf(filter) > -1)
{
    li[i].style.display = "";
} else {
    li[i].style.display = "none";
    }

转换为（if else 反向并过滤 == ""）：

if (!(a.innerHTML.toUpperCase().indexOf(filter) > -1)) && filter == "")
    {
    li[i].style.display = "none";
    } else {
        li[i].style.display = "block";
    }
}
0

嘿，我找到了一个解决方案，所有其他的都不起作用，我尝试了所有的方法。

这是解决方案：

  1. 在HTML中添加class="search-bar-items"

  2. 在CSS中写入以下代码。

    .search-bar-items{ display:none; }

请在您的答案中添加更多细节，例如可工作的代码或文档引用以扩展说明。 - Community
0

嘿，我找到了一个解决方案，所有其他方案都不起作用，我已经尝试了所有方案。

这就是解决方案：

  1. 将class="search-bar-items"（在html中）应用于所有列表

  2. 在CSS中编写以下代码。

    .search-bar-items{ display:none; }

带有类名search-bar-items的列表

CSS属性

请添加更多细节以扩展您的答案，例如工作代码或文档引用。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接