<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>`);
  }
}

//Filters data by term and then returns the results
function search( term ){
  
  const results = data.filter( item => item.toLowerCase().includes( term.toLowerCase() ) );
  
  return results;
  
}

//Debounce function with return value using promises
function debounce( callback, delay ) {
  let timer;
  
  return( ...args ) => {
    return new Promise( ( resolve, reject ) => {
      clearTimeout(timer);
      timer = setTimeout( () => {
          try {
            let output = callback(...args);
            resolve( output );
          } catch ( err ) {
            reject( err );
          }
      }, 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
  debouncedSearch(e.target.value)
  .then( results => renderResults( results ) )
  .catch(err => console.log(err.message));
})