Componente que admite la búsqueda entre diferentes opciones de un arreglo. El componente admite múltiples secciones divididas por sus respectivos identificadores de sección, a modo de títulos.

Importación:

import Searcher from "rcat-components/RCSearcher";

Propiedades

Nombre Descripción Tipo de dato
label Placeholder que tendrá el componente. Dato de tipo String. String
floatLabel Permite que el placeholder se vuelva una etiqueta flotante, la cual se sitúa encima del input. Por defecto está en false. Boolean
type Tipo de dato que recibe el input. Puede ser text o number. String
delay Dato de tipo numérico que especifica los milisegundos que tardará el componente en emitir el evento search con el valor del input. El valor por defecto es 300**.** Number
requestLength Dato de tipo número que indica a partir de cuántos caracteres ingresados se ejecutan las funciones del componente. Si el número de caracteres es menor a requestLength, el componente no hará nada. Number
disabled Deshabilita el input Boolean
pattern Permite añadir una expresión regular para restringir la entrada del usuario String
suggestions Lista de sugerencias u opciones que se mostrarán en el dropdown. Es un array, compuesto por objetos, que contiene una o mas secciones con el listado de opciones. El array debe tener la siguiente estructura:

El siguiente es un ejemplo de la estructura:

const suggestions = [ { sectionName: "Sección 1", options: [ {label: "Opción 1", id: 5, email: "[email protected]"}, {label: "Opción 2", id: 7, email: "[email protected]"} ] }, { sectionName: "Sección 2", options: [ {label: "Opción 1", id: 3, email: "[email protected]"} ] }, ] | Array | | forceSelection | Dato de tipo booleano. Al estar en true, el texto del input se elimina si no se escoge una de las sugerencias presentadas. Por defecto está en false. | Boolean | | textField | Dato de tipo String que indica el nombre del campo que leerá el componente para representar la opción escogida en el input. Este dato debe ir a modo de propiedad en la opción que se pasa al v-model.

{ field: “Texto a plasmar en el input”, nombre: “Nombre”, id: 5 } | String | | requiredField | Agrega un asterisco al final del placeholder del input para indicar que es un campo requerido. Es solo visual. | Boolean |

Eventos

Nombre Descripción
search Evento que se dispara al terminar el tiempo especificado en el propiedad delay. Está pensado principalmente para buscar coincidencias entre el texto del input y la lista de sugerencias. Retorna el objeto completo referente al value del input de búsqueda.
selectOption Evento que se dispara al seleccionar una opción de la lista. Retorna el objeto completo, el cual representa la opción seleccionada.
blur Evento que se dispara en el momento en el que el input pierde el foco.
focus Evento que se dispara en el momento en el que el input tiene el foco.
bottomReached Evento que indica que el scroll de la lista de sugerencias ha llegado al límite inferior.

Slots

icon Permite ubicar un ícono al inicio del input
suggestions-action Permite ubicar un elemento al inicio de todas las opciones. Este elemento se ubica al interior del dropdown.
section-title Permite establecer qué elemento hara las veces de título de sección en el dropdown. Si no se especifica, se aplican los estilos por defecto.
suggestion-item Permite customizar los elementos al interior del dropdown. Si no se especifica, se aplican los estilos por defecto.