HTML 搜索框

Question

我试图制作一个搜索框（而不是完整的 HTML 页面），当用户输入查询时，它应该在元素列表中搜索。我试过的代码如下。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
  width: 100%;
  position:relative;
  font-family: Segoe UI;
  margin-bottom: 15px;
  padding: 10px;
}

input {
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
 
ul-list li {
  padding: 10px 5px;
  border: 1px solid #eee;
}
ul li.hide {
  display: none;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li a, li{
  border: 1px solid #ddd;
  margin-top: -1px; 
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block

}

ul li a:hover:not(.header) {
  background-color: #eee;
}
</style>  </head>
<body style="background-image:none!important;">

<h2>HTML Search</h2>

<input type="text" id="myInput"  placeholder="Search.." title="Type in a search term...">

<ul id="myUL">
  <li>General</li>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>Fun</li>
  <li><a href="#">Run</a></li>
  <li>Users</li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Enzy</a></li>
  <li><a href="#">Bolt</a></li>
  <li>Coding</li>
  <li><a href="https://whosebug.com/questions/ask">Whosebug: Ask</a></li>
</ul>
<script>
  function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
};
      if (getUrlVars().q !== undefined && getUrlVars().q !== null){
      document.querySelector("input").value =  getUrlVars().q
    }
  
  
  // (A) WAIT FOR PAGE TO FULLY LOAD
window.addEventListener("load", function(){
  // (B) ATTACH KEY UP LISTENER TO SEARCH BOX
  document.querySelector("input").addEventListener("keyup", function(){
    // (C) GET THE SEARCH TERM

    var search = document.querySelector("input").value.toLowerCase(); 

    // (D) GET ALL LIST ITEMS
    var all = document.querySelectorAll("#the-list li");

    // (E) LOOP THROUGH LIST ITELS - ONLY SHOW ITEMS THAT MATCH SEARCH
    for (let i of all) {
      let item = i.innerHTML.toLowerCase();
      if (item.indexOf(search) == -1) { i.classList.add("hide"); }
      else { i.classList.remove("hide"); }
    }
  });
});
  
</script></body>
</html>

我还从 html-online.com 获得 URL 带有 getUrlVars() 函数的参数 ... 部分代码来自 W3Schools，其中一部分来自一篇文章（我丢失了 link...）

我该怎么做？

Answer 1

您的代码有效，您只需更改 <ul> 的 ID。您的代码查找 ID 为 the-list 的列表，因此只需将其重命名为该列表即可！

更新代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
  width: 100%;
  position:relative;
  font-family: Segoe UI;
  margin-bottom: 15px;
  padding: 10px;
}

input {
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
 
ul-list li {
  padding: 10px 5px;
  border: 1px solid #eee;
}
ul li.hide {
  display: none;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li a, li{
  border: 1px solid #ddd;
  margin-top: -1px; 
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block

}

ul li a:hover:not(.header) {
  background-color: #eee;
}
</style>  </head>
<body style="background-image:none!important;">

<h2>HTML Search</h2>

<input type="text" id="myInput"  placeholder="Search.." title="Type in a search term...">

<ul id="the-list">
  <li>General</li>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>Fun</li>
  <li><a href="#">Run</a></li>
  <li>Users</li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Enzy</a></li>
  <li><a href="#">Bolt</a></li>
  <li>Coding</li>
  <li><a href="https://whosebug.com/questions/ask">Whosebug: Ask</a></li>
</ul>
<script>
  function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
};
      if (getUrlVars().q !== undefined && getUrlVars().q !== null){
      document.querySelector("input").value =  getUrlVars().q
    }
  
  
  // (A) WAIT FOR PAGE TO FULLY LOAD
window.addEventListener("load", function(){
  // (B) ATTACH KEY UP LISTENER TO SEARCH BOX
  document.querySelector("input").addEventListener("keyup", function(){
    // (C) GET THE SEARCH TERM

    var search = document.querySelector("input").value.toLowerCase(); 

    // (D) GET ALL LIST ITEMS
    var all = document.querySelectorAll("#the-list li");

    // (E) LOOP THROUGH LIST ITELS - ONLY SHOW ITEMS THAT MATCH SEARCH
    for (let i of all) {
      let item = i.innerHTML.toLowerCase();
      if (item.indexOf(search) == -1) { i.classList.add("hide"); }
      else { i.classList.remove("hide"); }
    }
  });
});
  
</script></body>
</html>

HTML 搜索框

HTML Search box

html

javascript

css

searchbar