Blife UI

Se ha añadido Autocomplete input como una versión extendida con features adicionales como selección múltiple, renderizado personalizado de opciones, debounce automatico en evento de busqueda, etc.

Con Opciones de Objeto

⚠️ Importante: Cuando trabajas con opciones de objeto, SIEMPRE debes proporcionar la prop getOptionLabel. Esta función le indica al componente qué propiedad del objeto mostrar como texto en el input y también se utiliza para realizar el filtrado de coincidencias mientras el usuario escribe.

¿Por qué es necesario getOptionLabel?

Identificación del texto a mostrar: El componente necesita saber qué propiedad del objeto mostrar en el input cuando se selecciona una opción
Filtrado automático: Se utiliza para buscar coincidencias mientras el usuario escribe
Consistencia: Asegura que el texto mostrado y el filtrado usen la misma propiedad

¿Qué hace getOptionLabel?

Filtra: Al escribir "alex", encontrará "Alex Torres" porque filtra por la propiedad name
Muestra: Cuando seleccionas "Alex Torres", el input mostrará "Alex Torres"

Tipos de Datos

Opciones de String

Las opciones de string son la forma más simple de usar el componente. No requieren configuración adicional:

const stringOptions = [
  "React",
  "Vue.js",
  "Angular",
  "Svelte",
  "Next.js",
  "Nuxt",
  "Astro",
  "SolidJS",
  "Qwik",
  "Tailwind CSS",
];

Opciones de Objeto

⚠️ Requiere getOptionLabel: Cuando usas objetos, debes especificar qué propiedad contiene el texto a mostrar y filtrar.

interface User {
  name: string;
  email: string;
  avatar?: string;
  role?: string;
}
 
const objectOptions: User[] = [
  { name: "Alex Torres", email: "alex.torres@example.com", role: "Developer" },
  { name: "María García", email: "maria.garcia@example.com", role: "Designer" },
  { name: "Luis Fernández", email: "luis.fernandez@example.com", role: "Manager" },
];
 
// Uso obligatorio con getOptionLabel
<AutocompleteSearch
  options={objectOptions}
  getOptionLabel={(user) => user.name} // ← Especifica qué propiedad usar
  // ... otras props
/>;

Renderizado Personalizado de Opciones

💡 Consejo: renderOption te permite personalizar completamente cómo se ve cada opción en la lista desplegable. Puedes mostrar información adicional accediendo a cualquier propiedad del objeto, mientras que getOptionLabel se encarga del filtrado y del texto que aparece en el input.

Búsqueda Asíncrona con API

💡 Consejo: Para APIs externas, usa enableFilter={false} para deshabilitar el filtrado interno y manejar la búsqueda manualmente.

¿Por qué enableFilter={false}?

API externa: El servidor ya filtra los resultados
Evita doble filtrado: No aplica filtrado local sobre resultados ya filtrados
Rendimiento: Mejora la experiencia del usuario al mostrar resultados exactos de la API

Prop	Tipo	Requerido	Descripción
`placeholder`	`string`	-	Placeholder del input
`options`	`string[] \| Record<string, any>[]`	✅	Lista de opciones a mostrar
`size`	`small \| medium \| large`	-	Tamaño del input
`disabled`	`boolean`	-	Indica si el input debe deshabilitarse
`error`	`boolean`	-	Indica si el input debe tener estado de error
loading`	`boolean`	-	Indica si el input debe tener estado de carga
`enableFilter`	`boolean`	-	Indica si el input debe tener filtro de coincidencias
`value`	`string`	-	Valor del input controlado
`onValueChange`	`(value: string) => void`	-	Callback que es ejecutado cuando el valor del input cambia
`onSelect`	`(option: string \| Record<string, any>) => void`	-	Callback que es ejecutado cuando es seleccionada una opcion
`getOptionlabel`	`(option: Record<string, any>) => string`	-	Una funcion que debe retornar una cadena para mostrarlo como texto en el input cuando es seleccionada una opcion. Usalo solo cuando mandes como opciones una lista de objetos

Autocomplete search

Con Opciones de Objeto

Tipos de Datos

Opciones de String

Opciones de Objeto

Renderizado Personalizado de Opciones

Búsqueda Asíncrona con API

Filtrado Personalizado

Tamaños

Estado Deshabilitado

Estado Error

Ajustar la altura maxima del popover

Ejemplos

Búsqueda de Productos en E-commerce

Props