Search with Live Result Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
</style>

<div class="w-full max-w-2xl bg-white rounded-xl p-4 mx-auto mt-12">
  <label
    class="mx-auto mt-8 relative bg-white min-w-sm max-w-2xl flex flex-col md:flex-row items-center justify-center border py-2 px-2 rounded-2xl gap-2 focus-within:border-gray-300"
    for="search-bar">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 ml-2">
      <path
        d="M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z">
      </path>
    </svg>
    <input id="search-bar" placeholder="Enter your keyword here" name="q"
      class="px-6 py-2 w-full rounded-md flex-1 outline-none bg-white" required="">
  </label>
  <div class="container mx-auto p-4 mt-4" id="liveResult"></div>
</div>

<script>
  const data = [
    'Jean Marc',
    'Jean Paul',
    'John Doe',
    'Jane Doe',
    'James Smith',
    'Jack Johnson',
    'Jessica Miller',
    'Jennifer Brown',
    'Justin White'
  ];

  const searchInput = document.getElementById('search-bar');
  const liveResult = document.getElementById('liveResult');

  searchInput.addEventListener('input', handleSearch);

  function handleSearch() {
    const query = searchInput.value.toLowerCase();

    if (query === '') {
      liveResult.innerHTML = '';
      return;
    }

    const matchedItems = data.filter(item => item.toLowerCase().includes(query));

    const resultHtml = matchedItems.length > 0 ?
      matchedItems.map(item =>
        `<li class="flex flex-row"><div class="select-none cursor-pointer hover:bg-gray-50 flex flex-1 items-center p-4"><div class="font-medium">${item}</div></div></li>`
      ).join('') :
      '<li class="flex flex-row"><div class="select-none cursor-pointer hover:bg-gray-50 flex flex-1 items-center p-4"><div class="font-medium text-red-500">Data not result.</div></div></li>';

    liveResult.innerHTML = `<ul class="flex flex-col divide-y w-full">${resultHtml}</ul>`;
  }
</script>