# Autocomplete

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="app-demo" class="bg-base-100 rounded-xl border border-base-300"></div>
  </div>
</div>

```js
const paises = [
  "España",
  "México",
  "Argentina",
  "Colombia",
  "Chile",
  "Perú",
  "Venezuela",
  { label: "Estados Unidos", value: "US" },
  { label: "Canadá", value: "CA" },
  { label: "Reino Unido", value: "UK" },
];

const App = () => {
  const password = $("");

  // Lógica de validación sencilla
  const requirements = [
    { label: "Mínimo 8 caracteres", check: () => password().length >= 8 },
    { label: "Incluye un número", check: () => /\d/.test(password()) },
    { label: "Símbolo especial", check: () => /[^A-Za-z0-9]/.test(password()) }
  ];

  return div({ class: "p-10 max-w-md" }, [
    Input({
      type: "password",
      value: password,
      class: "input-warning",
      oninput: (e) => password(e.target.value),
      label: "Pass",
      float: true,
      left: span({ class: "icon-[lucide--lock] mr-2" }),
      // El contenido que se animará con fx() dentro del Input
      content: div({ class: "mt-2 p-4 bg-base-200 rounded-lg shadow-xl border border-base-300" }, [
        span({ class: "text-xs font-bold uppercase opacity-50" }, "Seguridad:"),
        ul({ class: "mt-2 space-y-1" }, 
          requirements.map(req => h('li', { 
            class: () => `flex items-center text-sm ${req.check() ? 'text-success' : 'text-error opacity-50'}` 
          }, [
            span({ class: () => `mr-2 ${req.check() ? 'icon-[lucide--check]' : 'icon-[lucide--x]'}` }),
            req.label
          ]))
        )
      ])
    })
  ]);
};

mount(App, "#app-demo");
```