文章/答案/技术大牛

发布

问HTML搜索框
EN

Stack Overflow用户

提问于 2021-08-13 20:30:43

回答 1查看 75关注 0票数 1

我试图创建一个搜索框(而不是一个完整的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://stackoverflow.com/questions/ask">Stackoverflow: 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…使用getUrlVars()函数获取URL参数。代码的一部分来自W3Schools，另一部分来自一篇文章(我丢失了链接...)

我该怎么做呢？

javascript

html

css

searchbar

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-13 20:38:49

你的代码可以工作了，你只需要修改<ul>的id即可。您的代码查找id为the-list的列表，因此只需将其重命名为该id，您就成功了！

更新代码：

<!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://stackoverflow.com/questions/ask">Stackoverflow: 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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68778054

复制

相似问题

问HTML搜索框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML搜索框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML搜索框
EN