sigpro-ui/docs/components/autocomplete.md

Autocomplete

Live Demo

// const App = () => {
//   const selected = $('');
//   const filterType = $('all');
  
//   const allItems = {
//     fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
//     vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
//     all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
//   };
  
//   return div({ class: 'flex flex-col gap-4 w-full' }, [
//     Select({
//       items: [
//         { value: 'all', label: 'All items' },
//         { value: 'fruits', label: 'Fruits' },
//         { value: 'vegetables', label: 'Vegetables' }
//       ],
//       value: filterType,
//       onchange: (e) => filterType(e.target.value)
//     }, 
//     ),
//     Autocomplete({
//       items: () => allItems[filterType()],
//       value: selected,
//       onselect: (value) => selected(value)
//     })
//   ]);
// };


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

  const countries = [
    'España', 'México', 'Argentina', 'Colombia', 'Chile',
    { label: 'Estados Unidos', value: 'US' },
    { label: 'Canadá', value: 'CA' },
  ];

  // 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()) },
  ];
  const paisSelected = $("");
  return div({ class: "p-10 max-w-md" }, [
    Autocomplete({
      label: 'País',
      float: true,
      placeholder: 'Escribe para buscar...',
      items: countries,
      value: selected,
      onselect: (item) => console.log('Seleccionado:', item),
    }),

    h('p', { class: 'text-sm opacity-70' }, () =>
      `Valor actual: ${selected() || 'ninguno'}`
    ),
    Input({
      type: "password",
      value: password,
      rule: "[0-9]*",
      hint: "Debes escribir numeros del 0 al 9",
      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");