Breaking News: Grepper is joining You.com. Read the official announcement!

How to make a search bar

Cyber-Ninja answered on January 6, 2024 Popularity 9/10 Helpfulness 1/10

answer How to make a search bar

How to make a search bar

Comment

<html>
<head>
<title></title>
</head>
<body>
<h1>
  Search bar
</h1>
  <p>
    Search for a movie or season you are looking for.
  </p>
<div>

  <input type="text" placeholder="Search...">
  <ul>
    
  </ul>
</div>

<script>
const list = [
  {
    name: "Friends",
    type: "Season",
    rating: 9.0
  },
  {
    name: "All Of Us Are Dead",
    type: "Season",
    rating: 9.5
  },
  {
    name: "Money Heist",
    type: "Season",
    rating: 9.5
  },
  {
    name: "Inception",
    type: "Movie",
    rating: 9.5
  },
  {
    name: "Departed",
    type: "Movie",
    rating: 9.0
  },
  {
    name: "Queen's Gambit",
    type: "Season",
    rating: 8.8
  }
]
let input = document.querySelector("input");
let filterSearch = {
  search: ""
}
function filter(obj, search){
  let filterArray = obj.filter(function(item){
    return item.name.toLowerCase().includes(search.search.toLowerCase())
  })
  
  document.querySelector("ul").innerHTML = "";
  return filterArray.forEach(function(item){
     const createLi = document.createElement("li");
     createLi.innerText = `${item.name}: ${item.rating}`;
     document.querySelector("ul").append(createLi);
    if(input.value === ""){
      document.querySelector("ul").innerHTML = "";
  }
  })
}
if(input.value === ""){
  document.querySelector("ul").innerHTML = "";
}
input.addEventListener("input", function(e){
  filterSearch.search = e.target.value;
  filter(list, filterSearch)
})
input.addEventListener("click", function(){
  input.classList.add("inputClass")
})
input.addEventListener("blur", function(){
  input.classList.remove("inputClass")
})
</script>
</body>
</html>

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript search

Link to this answer
Share Copy Link

Contributed on Jan 06 2024

Cyber-Ninja

0 Answers Avg Quality 2/10

How to make a search bar

Contents

More Related Answers

How to make a search bar

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.