Blife UI

Con Opciones de Objeto

⚠️ Importante: Cuando trabajas con opciones de objeto, SIEMPRE debes proporcionar la prop fieldToDisplay. Esta función le indica al componente qué mostrar como texto en el input cuando se selecciona una opción.

Selección Múltiple

Una de las características principales de AutocompleteInput es el soporte para selección múltiple. Cuando multiple={true}, las opciones seleccionadas se muestran como chips debajo del input.

React
Vue.js

Búsqueda Asíncrona

💡 Consejo: Usa el evento onSearch para realizar búsquedas asíncronas.

Cómo funciona el evento onSearch:

AutocompleteInput aplica debounce automáticamente a onSearch
El retraso por defecto es de 250ms (configurable con debounceDelay)
Solo se ejecuta onSearch cuando el usuario deja de escribir
Reduce significativamente las llamadas a la API

Renderizado Personalizado de Opciones

💡 Consejo: renderOption te permite personalizar completamente cómo se ve cada opción en la lista desplegable.

Estado Deshabilitado

Estado Error

Estado Cargando

El estado de carga muestra un spinner en el input y en el popover:

Configuración del Debounce

Puedes personalizar el retraso del debounce usando la prop debounceDelay:

<AutocompleteInput
  debounceDelay={500} // 500ms en lugar del valor por defecto de 250ms
  placeholder="Buscar..."
/>

Modo Controlado

En modo controlado, manejas explícitamente el estado del input y las opciones seleccionadas:

function ControlledExample() {
  const [value, setValue] = useState("");
  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
  const [options, setOptions] = useState<string[]>([]);
 
  const handleSearch = (searchTerm: string) => {
    // Lógica de búsqueda
    setOptions(filteredOptions);
  };
 
  return (
    <AutocompleteInput
      value={value}
      onChange={setValue}
      selectedOptions={selectedOptions}
      onSelect={setSelectedOptions}
      options={options}
      onSearch={handleSearch}
      multiple
    />
  );
}

Props

Prop	Tipo	Requerido	Descripción
`value`	`string`	-	Valor controlado del input
`onChange`	`(newValue: string) => void`	-	Callback que es ejecutado cuando cambia el valor del input
`options`	`string[] \| Record<string, any>[]`	✅	Lista de opciones a mostrar
`onSearch`	`(searchTerm: string) => void`	-	Callback que es ejecutado cuando el usuario deja de escribir (con debounce). Se envía por parámetro el valor del input
`onSelect`	`(option: string \| Record<string, any>) => void`	-	Callback que es ejecutado cuando una opción es seleccionada. Si `multiple=true`, recibe un array de opciones; si `multiple=false`, recibe una sola opción
`onClear`	`() => void`	-	Callback que es ejecutado cuando se limpia el valor del input
`fieldToDisplay`	`(option: string \| Record<string, any>) => string`	-	Función que se usará si las opciones son tipo objeto. Debe retornar el valor que se mostrará como label en el input cuando una opción sea seleccionada
`renderOption`	`(option: string \| Record<string, any>) => ReactNode`	-	Función que permite personalizar cómo se renderiza cada opción en la lista desplegable
`multiple`	`boolean`	-	Habilita el modo de selección múltiple
`selectedOptions`	`string[] \| Record<string, any>[]`	-	Opciones seleccionadas en modo controlado (usado con multiple=true)
`defaultSelectedOptions`	`string[] \| Record<string, any>[]`	-	Opciones seleccionadas iniciales en modo no controlado (usado con multiple=true)
`disabled`	`boolean`	-	Estado deshabilitado
`loading`	`boolean`	-	Estado de carga. Muestra spinner en el input y en el popover
`error`	`boolean`	-	Estado de error
`placeholder`	`string`	-	Placeholder del input
`debounceDelay`	`number`	-	Retraso en milisegundos para el debounce de la búsqueda
`className`	`string`	-	Clase CSS para el contenedor principal

Autocomplete input