如何制作一个有效的搜索栏

Question

I'm trying to make a functioning searchbar in javascript,that when you press enter, will delete all the content of the page while only showing the elements that I'm searching for. The elements I just mentioned are in order list.

Answer 1

You could have 2 lists. One for all of the elements and the other one for filtered ones.

Answer 2

You could use Array.filter to narrow the list down to items that don't meet the search criteria, and then loop over those elements, and set those items style.display to none.

Something like this (Im not sure how/what the elements of the ordered list are)

//You may have to change this to reflect the actual structure your list
let orderedList = Array.from(document.querySelectorAll('ol>li'))
// get the
let query = document.getElementById('search').value.toLowerCase()
orderedList.filter(element=>{
  // get the text in the list and compare it to the query
  let elementText = element.innerText.toLowerCase()
  let matchesQuery = elementText === query || elementText.startsWith(query) || elementText.contains(query)
  //return the ones that don't match
  return !matchesQuery
}).forEach(element=>{
  //now loop over the ones that dont match
  element.style.display = 'none'
})