<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Select dengan Pencarian</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/alpinejs" defer></script>
</head>
<body class="bg-gray-100 p-10">

  <div x-data="{ open: false, query: '', options: ['Anton','Budi','Citra','Dewi','Eka'], selected: '' }" class="relative w-64">
    <!-- Input pencarian -->
    <input 
      type="text" 
      x-model="query" 
      @focus="open = true" 
      @blur="setTimeout(() => open = false, 200)" 
      placeholder="Cari nama..." 
      class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-600"
    >

    <!-- Dropdown hasil pencarian -->
    <ul x-show="open" class="absolute mt-1 w-full bg-white border rounded-lg shadow-lg max-h-40 overflow-auto z-10">
      <template x-for="option in options.filter(o => o.toLowerCase().includes(query.toLowerCase()))" :key="option">
        <li 
          @click="selected = option; query = option; open = false" 
          class="cursor-pointer px-4 py-2 hover:bg-purple-100"
          x-text="option"
        ></li>
      </template>
    </ul>

    <!-- Hasil pilihan -->
    <p class="mt-3 text-sm text-gray-600">Terpilih: <span x-text="selected"></span></p>
  </div>

</body>
</html>
