Campo de búsqueda ​

El componente SisdaiCampoBusqueda permite a las personas usuarias encontrar rápidamente contenido específico dentro de una aplicación o un sitio web. Al proporcionar un campo de búsqueda, las personas usuarias pueden escribir términos o frases relevantes y obtener resultados que coincidan con la consulta.

Uso ​

Para utilizar el componente SisdaiCampoBusqueda, se debe proporcionar una lista de elementos a través de la propiedad catalogo. Además, se puede manejar el resultado de la búsqueda mediante el evento alFiltrar, que devuelve una lista filtrada con los resultados de la búsqueda.

A continuación, se muestra un ejemplo de uso de etiqueta simple:

html
<SisdaiCampoBusqueda
  :catalogo="listaElementos"
  @alFiltrar="listaFiltrada => {
    /*Aqui se obtiene y manipula el resultado de la búsqueda */
   listaElementos2 = listaFiltrada
  }"
/>

Mostrando los resultados de búsqueda:

html
<ul>
  <li v-for="elemento in listaElementos2">{{ elemento.nombre }}</li>
</ul>

Donde listaElementos es la lista de elementos sobre los que se realiza la búsqueda y listaElementos2 es la variable que recibe el resultado de la búsqueda.

Vista simplificada

En la vista simplificada el componente SisdaiCampoBusqueda no se modifica en diseño ni en comportamiento.

API ​

Este componente admite las siguientes propiedades y eventos:

Propiedades ​

  • catalogo: corresponde a la lista de elementos sobre los que se desea aplicar la búsqueda.
    • Tipo de dato: Array<Object>
    • Valor predeterminado: []
    • Requerido: sí
  • propiedadBusqueda: corresponde al nombre de la propiedad de cada objeto en donde se aplicará la búsqueda.
    • Tipo de dato: String
    • Valor predeterminado: 'nombre'
    • Requerido: opcional
  • catalogoAnidado: indica si el catálogo tiene anidación o agrupación.
    • Tipo de dato: Boolean
    • Valor predeterminado: false
    • Requerido: opcional
  • catalogoAnidadoPropiedadElementos: el nombre de la propiedad que contiene la lista de elementos de cada grupo.
    • Tipo de dato: String
    • Valor predeterminado: 'elementos'
    • Requerido: opcional
  • etiqueta: corresponde a la etiqueta de búsqueda, comúnmente conocida como placeholder.
    • Tipo de dato: String
    • Valor predeterminado: 'Buscar...'
    • Requerido: opcional

Métodos ​

Este componente no cuenta con métodos públicos.

Eventos ​

  • alFiltrar: evento que se dispara al momento de ejecutar la búsqueda. Como parámetro se obtiene la lista de elementos filtrada.

Ejemplos de uso ​

Ejemplo básico ​

El siguiente ejemplo muestra cómo utilizar el campo de búsqueda de forma básica:

  • bash - Bash
  • c - C
  • cpp - C++
  • csharp - C#
  • css - CSS
  • dart - Dart
  • docker - Docker
  • elixir - Elixir
  • go - Go
  • graphql - GraphQL
  • html - HTML
  • java - Java
  • javascript - JavaScript
  • json - JSON
  • kotlin - Kotlin
  • markdown - Markdown
  • php - PHP
  • python - Python
  • r - R
  • ruby - Ruby
  • rust - Rust
  • scss - SCSS
  • shell - Shell
  • sql - SQL
  • swift - Swift
  • typescript - TypeScript
  • xml - XML
  • yaml - YAML
vue
<script setup>
import { ref } from 'vue'

const listaLanguages = ref([
  { id: 'bash', nombre: 'Bash' },
  { id: 'c', nombre: 'C' },
  { id: 'cpp', nombre: 'C++' },
  { id: 'csharp', nombre: 'C#' },
  { id: 'css', nombre: 'CSS' },
  { id: 'dart', nombre: 'Dart' },
  { id: 'docker', nombre: 'Docker' },
  { id: 'elixir', nombre: 'Elixir' },
  { id: 'go', nombre: 'Go' },
  { id: 'graphql', nombre: 'GraphQL' },
  { id: 'html', nombre: 'HTML' },
  { id: 'java', nombre: 'Java' },
  { id: 'javascript', nombre: 'JavaScript' },
  { id: 'json', nombre: 'JSON' },
  { id: 'kotlin', nombre: 'Kotlin' },
  { id: 'markdown', nombre: 'Markdown' },
  { id: 'php', nombre: 'PHP' },
  { id: 'python', nombre: 'Python' },
  { id: 'r', nombre: 'R' },
  { id: 'ruby', nombre: 'Ruby' },
  { id: 'rust', nombre: 'Rust' },
  { id: 'scss', nombre: 'SCSS' },
  { id: 'shell', nombre: 'Shell' },
  { id: 'sql', nombre: 'SQL' },
  { id: 'swift', nombre: 'Swift' },
  { id: 'typescript', nombre: 'TypeScript' },
  { id: 'xml', nombre: 'XML' },
  { id: 'yaml', nombre: 'YAML' },
])
const listaLanguagesFiltrada = ref(listaLanguages.value)
</script>
<template>
  <div>
    <SisdaiCampoBusqueda
      :catalogo="listaLanguages"
      etiqueta="Buscar lenguaje"
      @alFiltrar="r => (listaLanguagesFiltrada = r)"
    />
    <ul style="max-height: 300px; overflow-y: auto">
      <li
        v-for="language in listaLanguagesFiltrada"
        :key="language.id"
      >
        {{ language.id }} - {{ language.nombre }}
      </li>
    </ul>
  </div>
</template>

Ejemplo con lista anidada ​

Resultados:

  • Grupo de capas 1
    • Capa uno
    • Capa dos
  • Grupo de capas 2
    • Capa tres
    • Capa cuatro
    • Capa cinco
  • Grupo de capas 3
    • Capa seis
    • Capa siete
    • Capa ocho
    • Capa nueve
vue
<script setup>
import { ref } from 'vue'

const catalogo = ref([
  {
    nombre: 'Grupo de capas 1',
    capas: [
      { titulo: 'Capa uno', descripcion: 'Descripción de la capa 1' },
      { titulo: 'Capa dos', descripcion: 'Descripción de la capa 2' },
    ],
  },
  {
    nombre: 'Grupo de capas 2',
    capas: [
      { titulo: 'Capa tres', descripcion: 'Descripción de la capa 3' },
      { titulo: 'Capa cuatro', descripcion: 'Descripción de la capa 4' },
      { titulo: 'Capa cinco', descripcion: 'Descripción de la capa 5' },
    ],
  },
  {
    nombre: 'Grupo de capas 3',
    capas: [
      { titulo: 'Capa seis', descripcion: 'Descripción de la capa 6' },
      { titulo: 'Capa siete', descripcion: 'Descripción de la capa 7' },
      { titulo: 'Capa ocho', descripcion: 'Descripción de la capa 8' },
      { titulo: 'Capa nueve', descripcion: 'Descripción de la capa 9' },
    ],
  },
])
const catalogoFiltrado = ref(catalogo.value)
</script>
<template>
  <div class="">
    <SisdaiCampoBusqueda
      :catalogo="catalogo"
      :catalogo-anidado="true"
      catalogo-anidado-propiedad-elementos="capas"
      propiedad-busqueda="titulo"
      @alFiltrar="r => (catalogoFiltrado = r)"
    />
    <p>Resultados:</p>
    <ul>
      <li
        v-for="grupo in catalogoFiltrado"
        :key="grupo.nombre"
        :id="grupo.nombre"
      >
        {{ grupo.nombre }}
        <ul>
          <li
            v-for="capa in grupo.capas"
            :key="capa.titulo"
            :id="capa.titulo"
          >
            {{ capa.titulo }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>