Reputation: 27

HTML Search box

I was trying to make a search box (Rather than a full HTML page) that should search in the list of elements when the user writes in a query. The code I tried is below.

<!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>

Also I get URL Parameters with the getUrlVars() function from html-online.com … some part of the code is from W3Schools and one is from an article (I lost the link...)

How can I do this?

Upvotes: 1

Answers (1)

Berlm

Reputation: 467

Your code works, you just need to change the id of the <ul>. Your code looks for a list with the id the-list, so just rename it to that and you're golden!

Updated code:

<!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>

Upvotes: 2

HTML Search box

Answers (1)

Related Questions