Untitled

<!DOCTYPE HTML>
<html lang='pt'>
  <head>
    <meta charset='utf-8'>
    <title>Um simples exemplo de filtro de busca.</title>
  </head>
  <body>
    <h1>Um simples exemplo de filtro de busca.</h1>
    <input type='text' id='search-filter' placeholder='Filtre sua busca por aqui.'>
    <div id='options'></div>
    <script>
      ;(() => {
        const $ =
          selector =>
            document.querySelector(selector)

        const filterInput = $('#search-filter')
        const filteredOptions = $('#options')

        const elementList =
          itemList =>
            itemList
            .map(item => {
              const li = document.createElement('li')
              li.textContent = item
              return li
            })
            .reduce((ul, item) => {
              ul.appendChild(item)
              return ul
            }, document.createElement('ul'))

        const optionList = ['foo', 'bar', 'baz']

        const optionsArea = $('#options')
        optionsArea.appendChild(elementList(optionList))
      })()
    </script>
  </body>
</html>