<input type='text' id='search-input' placeholder='Search'/>

<h4>Results:</h4>
<ul id='results'>
  
<ul/>
//Mock data
const data = [
  'Book',
  'Book Number One',
  'Book Number Two',
  'Book Number Three',
  'Book Numero Uno',
  'Book Numero Dos',
  'Book Numero Tres',
  'Book #1',
  'Book #2',
  'Book #3'
]

//Results list element
const results_list_element = document.getElementById( 'results' );
const search_input_element = document.getElementById( 'search-input' );

//This function renders specified results into the results element
function renderResults( results ){
  //Clear the results element
  results_list_element.innerHTML = '';
    //Loop through results
  for ( const result of results ) {
      //For each result, append an element to the results list
    results_list_element.insertAdjacentHTML( 'beforeend', `<li>${result}</li>`);
  }
}

//This function filters data by term and then renders the results
function search( term ){
  const results = data.filter( item => item.toLowerCase().includes( term.toLowerCase() ) );
  
  renderResults( results );
  
}

//Debounce function
function debounce( callback, delay ) {
  let timer;
  
  return( ...args ) => {
       clearTimeout(timer);
       timer = setTimeout( () => {
         callback( ...args );
       }, delay );
  }
}

//Debounced search()
debouncedSearch = debounce(search, 600);

//Show all results before user has typed anything
renderResults( data );

//Add event listener for searching
search_input_element.addEventListener( 'input', e => {
  //Call debounced search with the input value
  //search(e.target.value);
  debouncedSearch(e.target.value);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.