vue simple suggest Descargar - vue simple suggest Descarga del código fuente

vue-simple-sugerencia

Componente de autocompletar simple pero rico en funciones para Vue.js

Instalar

npm install --save vue-simple-suggest

Consulte la guía de instalación para obtener más opciones.

Tabla de contenido

vue-simple-sugerencia
- Instalar
- Tabla de contenido
- Qué es
  - Características
  - ¿Nuevas características?
- Ejemplos:
  - Ejemplo sencillo
  - Ejemplo asíncrono
- Instalación
  - MNP
  - desempaquetado
  - Importador
    - Polirellenos
  - Uso
- Configuración de compilación
- Controles predeterminados
- API de componentes
  - TLDR
  - Estructura de clases CSS
    - Transiciones
  - Definiciones de API
    - Accesorios
      - modo
    - Eventos emitidos
    - Métodos de referencia
    - Controladores de eventos de referencia
    - Datos de referencia
  - Tragamonedas
    - Entrada personalizada
    - Accesibilidad en entrada personalizada
    - Elemento de sugerencia personalizado
    - Ranuras personalizadas para artículos varios
- Colaboradores

Qué es

Este es un componente de autocompletar/sugerencia simple pero rico en funciones para Vue.js.

En realidad, tiene tantas funciones que es posible hacer cosas locas con él, como

Imitando menús desplegables y desplegables
Convierta la lista de sugerencias en una tabla de sugerencias real
Trabaje con CUALQUIER tipo de entrada personalizada pasada (como tipo=botón, radio, etc.)
... Y muchas cosas más

Y, como beneficio adicional, es muy ligero.

Características

soporte v-model .
Atributos de accesibilidad automática (WAI-ARIA completo)
Cambio de tipo v-model (selección/entrada).
Elemento de entrada personalizado a través de la ranura predeterminada.
Elementos de lista personalizados a través de espacios con ámbito con nombre.
Se proporcionan todos los accesorios válidos en HTML5 para el elemento de entrada predeterminado ( type , tabindex , etc.).
Controles de teclado personalizables.
API rica y sencilla.
Clases de CSS para un rediseño rápido y sencillo.
Muchas variantes de construcción para elegir.
Diseño de componentes flexible y personalizable.
Polyfills opcionales para IE importables desde la biblioteca.

Todos los accesorios, eventos y espacios son OPCIONALES para este componente, por lo que se puede utilizar sin ninguna configuración.

¿Nuevas características?

Si cree que falta algo importante (o encontró un error), no dude en crear un problema. :)

Ejemplos:

Para usar el componente simplemente instálelo a través de NPM:

npm install --save vue-simple-suggest

Luego, en su componente/página Vue.js haga lo siguiente...

Ejemplo sencillo

Si necesita sugerir cosas desde una matriz estática:

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    :list =" simpleSuggestionList "
    :filter-by-query =" true " >
<!-- Filter by input text to only show the matching results -->
  </ vue-simple-suggest >

  < br >

  < p > Chosen element: {{ chosen }} </ p >
</ template >

< script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components : {
      VueSimpleSuggest
    } ,
    data ( ) {
      return {
        chosen : ''
      }
    } ,
    methods : {
      simpleSuggestionList ( ) {
        return [
          'Vue.js' ,
          'React.js' ,
          'Angular.js'
        ]
      }
    }
  }
</ script >

Ejemplo asíncrono

Si se trata de datos asíncronos del servidor (por ejemplo, usando https://swapi.co/):

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    display-attribute =" name "
    value-attribute =" url "
    :list =" getSuggestionList "
  > </ vue-simple-suggest >

  < br >

  < p > Chosen element: {{ chosen }} </ p >
</ template >

< script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components : {
      VueSimpleSuggest
    } ,
    data ( ) {
      return {
        chosen : ''
      }
    } ,
    methods : {
      // Function returning a promise as a factory for suggestion lists.
      //
      // vue-simple-suggest calls it automatically when an update to the list is needed,
      // no need for watchers here!
      getSuggestionList ( ) {
        return fetch ( 'https://swapi.co/api/people' , { method : 'GET' } )
          . then ( response => response . json ( ) )
          . then ( json => json . results ) ; /*
          returns a promise with a list of star-wars characters
        */
      }
    }
  }
</ script >

Para ver un ejemplo más avanzado (usando la búsqueda en Wikipedia), consulte nuestra fuente de ejemplo.

Instalación

MNP

npm install --save vue-simple-suggest
# or
yarn add vue-simple-suggest

desempaquetado

Si se incluye mediante este método, el componente se instalará automáticamente.

 <!-- UMD Component, async/await polyfills through promises -->
< script type =" text/javascript " src =" https://unpkg.com/vue-simple-suggest " > </ script >
< script type =" text/javascript " src =" https://unpkg.com/[email protected] " > </ script >
                                                              <!-- Specific version -->

<!-- CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-simple-suggest/dist/styles.css " >

<!-- If you need polyfills, use IIFE verision below -->
<!-- IIFE build includes ALL polyfills: Object.assign, Promises, Generators, Async/Await! -->
< script type =" text/javascript " src =" https://unpkg.com/vue-simple-suggest/dist/iife.js " > </ script >

Importador

 /// ESNext (original code, no pollyfills, single-file .vue component, css included)
import VueSimpleSuggest from 'vue-simple-suggest/lib'
///

/// ES6 (async polyfills)
import VueSimpleSuggest from 'vue-simple-suggest'
// or, if you have problems importing:
import VueSimpleSuggest from 'vue-simple-suggest/dist/es6'
///

/// ES7 and above (no polyfills)
import VueSimpleSuggest from 'vue-simple-suggest/dist/es7'
///

/// CommonJS (async, arrow-functions and promises are polyfilled)
const VueSimpleSuggest = require ( 'vue-simple-suggest' )
// or, if you have problems importing:
const VueSimpleSuggest = require ( 'vue-simple-suggest/dist/cjs' )
///

// Optional - import css separately with css loaders:
import 'vue-simple-suggest/dist/styles.css'

Polirellenos

Nuevo en v1.8.3

vue-simple-suggest viene con polyfills opcionales mínimos para IE11+: Object.assign , Element.prototype.closest y Element.prototype.matches . Puedes importarlos así:

 import 'vue-simple-suggest/lib/polyfills' ;
// or
require ( 'vue-simple-suggest/lib/polyfills' ) ;

Uso

Globalmente:

 // You don't need to do it, if including via <script> (umd, iife)
Vue . component ( 'vue-simple-suggest' , VueSimpleSuggest )

En componentes .vue de un solo archivo:

 < script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Using a css-loader

  export default {
    components : {
      VueSimpleSuggest
    }
  }
</ script >

Configuración de compilación

 # clone the repo
git clone https://github.com/KazanExpress/vue-simple-suggest.git
cd ./vue-simple-suggest

# install dependencies
npm install

# serve example with hot reload at localhost
npm run dev

# build example & readme for static serving
npm run docs

Controles predeterminados

Nuevo en v1.2.0

Estos son atajos de teclado predeterminados.

Se puede personalizar con el accesorio controls . Todos los campos de este objeto controls son opcionales.

Esquema predeterminado:

Clave (código clave)	Descripción
`Escape` (27)	Si se muestra la lista de sugerencias, escóndela. Definido por la propiedad `hideList` .
`ArrowDown` (40)	Si la lista de sugerencias está oculta, muéstrela. Definido por la propiedad `showList` .
`ArrowUp` (38) / `ArrowDown` (40)	Desplácese (pase el cursor) por las sugerencias. Definido respetuosamente por las propiedades `selectionUp` / `selectionDown` .
`Enter` (13)	Si se muestra la lista, elige el elemento resaltado. Definido por propiedad `select` .
`(Ctrl/Shift) + Space` (32)	Seleccione el primer elemento de la lista. Definido por la propiedad `autocomplete` . Funciona con la tecla modificadora `Ctrl` o la tecla modificadora `Shift` .
`(Ctrl/Shift) + Enter` (13)	Igual que el anterior, pero también oculta la lista de sugerencias.

Objeto JS:

 {
  selectionUp : [ 38 ] ,
  selectionDown : [ 40 ] ,
  select : [ 13 ] ,
  showList : [ 40 ] ,
  hideList : [ 27 ] ,
  autocomplete : [ 32 , 13 ]
}

API de componentes

TLDR

Haga clic para expandir

 <!-- Ref to access the API, v-model for efficient query binding -->
< vue-simple-suggest ref =" vueSimpleSuggest " v-model =" model "
  value-attribute =" id "
  display-attribute =" title "
  mode =" input "
  placeholder =" placeholder!!! "
  :list =" getListFunction "
  :max-suggestions =" 10 "
  :min-length =" 3 "
  :debounce =" 100 "
  :destyled =" false "
  :remove-list =" false "
  :filter-by-query =" false "
  :filter =" customFilterFunction "
  :value =" defaultValue "
  :nullable-select =" true "
  :controls =" {
    selectionUp: [38, 33],
    selectionDown: [40, 34],
    select: [13, 36],
    showList: [40],
    hideList: [27, 35],
    autocomplete: [32, 13],
  } "
  @input =" onInputEvent "
  @select =" onSuggestSelect "
  @hover =" onSuggestHover "
  @focus =" onFocus "
  @blur =" onBlur "
  @request-start =" onRequestStart "
  @request-done =" onRequestDone "
  @request-failed =" onRequestFailed "
  @show-list =" onShowList "
  @hide-list =" onHideList "
>
  <!-- v-model on input itself is useless -->
  < input class =" optional-custom-input " >

  <!-- Appears o top of the list -->
  < template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
    < div class =" misc-item " >
      < span > You're searching for {{ query }}. </ span >
    </ div >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
    < hr >
  </ template >

  < div slot =" suggestion-item " slot-scope =" { suggestion } " class =" custom " > {{ suggestion.title }} </ div >

  <!-- Appears below the list -->
  < div class =" misc-item " slot =" misc-item-below " slot-scope =" { suggestions } " v-if =" loading " >
    < span > Loading... </ span >
  </ div >
</ vue-simple-suggest >

Estructura de clases CSS

Si es necesario personalizar la apariencia del componente, aquí está la estructura de clases interna:

 // .designed is applied only if `destyled` prop is false.
.vue-simple-suggest.designed.focus // .focus is applied whenever the component is focused.
  .input-wrapper
    .default-input // Replaced with your custom input if default slot is provided.
  .suggestions // Also has transition classes, see below.
    .suggest-item

Si desea utilizar sus clases existentes o marcos como Bootstrap, puede inyectar sus propias clases usando el accesorio 'styles' :

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    :list =" simpleSuggestionList "
    :styles =" autoCompleteStyle "
    :destyled = true
    :filter-by-query =" true " >
  </ vue-simple-suggest >
</ template >

< script >
  ...
  export default {
    ...
    data ( ) {
      return {
        autoCompleteStyle : {
          vueSimpleSuggest : "position-relative" ,
          inputWrapper : "" ,
          defaultInput : "form-control" ,
          suggestions : "position-absolute list-group z-1000" ,
          suggestItem : "list-group-item"
        }
      }
    } ,
    ...
  }
</ script > `

< style lang =" scss " >
.z-1000 {
  z-index: 1000;
}
.hover {
  background-color: #007bff;
  color: #fff;
}
</ style >

Esquema:

Propiedad	Descripción
`vueSimpleSuggest`	Nombre de clase adicional para el elemento raíz del componente.
`inputWrapper`	Nombre de clase adicional para el elemento `.input-wrapper` .
`defaultInput`	Nombre de clase adicional para el elemento `input` si no se proporciona ningún componente de entrada personalizado.
`suggestions`	Nombre de clase adicional para la lista de sugerencias elemento `ul` .
`miscItemAbove`	Nombre de clase para el contenedor de ranura de `misc-item-above` (elemento `li` en sí).
`suggestItem`	Nombre de clase adicional para el elemento `li` del elemento de sugerencia.
`miscItemBelow`	Nombre de clase para el contenedor de ranura de `misc-item-below` (elemento `li` en sí).

Transiciones

Nuevo en v1.8.0

También puede definir transiciones de listas personalizadas definiendo reglas CSS para la transición denominada vue-simple-suggest en el div .suggestions :

. suggestions {
  /* It's improtant to have a cpecific pivot point for transition:*/
  opacity : 1 ;
}

. vue-simple-suggest-enter-active . suggestions ,
. vue-simple-suggest-leave-active . suggestions {
  /* Transition length here:*/
  transition : opacity .2 s ;
}

. vue-simple-suggest-enter . suggestions ,
. vue-simple-suggest-leave-to . suggestions {
  /* Transition rule for "disengaged" element:*/
  opacity : 0 ;
}

Definiciones de API

Accesorios

Nombre	Tipo	Por defecto	Descripción
`controls` ^v1.2.0	Objeto	Ver controles predeterminados	Determina los atajos de teclado en códigos de teclas (para fines de compatibilidad del navegador). Las matrices brindan la capacidad de asignar múltiples claves a una acción. Consta de 5 campos de matriz: `selectionUp` , `selectionDown` , `select` , `hideList` y `autocomplete` , todos los cuales son opcionales.
`max-suggestions`	Número	`10`	La cantidad máxima de sugerencias para mostrar. Establezca en 0 para sugerencias infinitas.
`min-length`	Número	`1`	La cantidad mínima de símbolos en la entrada para activar la lista de sugerencias. `vue-simple-suggest` comienza a comportarse como un menú desplegable, si el valor es 0.
`display-attribute`	Cadena	`'title'`	La propiedad de un objeto de sugerencia para mostrar en una lista. Admite caminos punteados.
`value-attribute`	Cadena	`'id'`	La propiedad de un objeto de sugerencia que se utilizará como clave única. Admite caminos punteados.
`list`	Función o matriz	`() => []`	La función del proveedor de matrices debe aceptar una consulta como único argumento. Puede devolver una matriz o una promesa. Puede ser asíncrono. El componente se comporta como una entrada simple sin esta función.
`debounce`	Número	`0`	Determina el rebote `list` (un tiempo entre el evento de entrada y la ejecución de una función).
`destyled`	booleano	`false`	Si cancelar el estilo predeterminado de la lista de entradas y sugerencias.
`styles` ^v1.8.0	Objeto	`{}`	Clases CSS para adjuntar con el estilo del componente actual.
`remove-list`	booleano	`false`	Si es verdadero, la lista de sugerencias siempre estará oculta.
`filter-by-query`	booleano	`false`	Si se deben filtrar las sugerencias resultantes por consulta de texto de entrada (convertirlo en un componente de búsqueda).
`filter`	Función	-	Una función personalizada para filtrar los resultados de las sugerencias que acepta un solo elemento y una consulta para filtrar como sus 2 argumentos. Se usa solo si `filter-by-query` está establecido en `true` .
`mode` ^v1.4.0	Cadena	`'input'`	El evento `v-model` . Determina el evento que desencadena `v-model` . Puede ser uno de `'input'` ( `v-model` vincula una propiedad mostrada) o `'select'` ( `v-model` vincula un elemento seleccionado).
`type` , `value` , `pattern` , etc...			Todos los atributos de entrada HTML5 con sus valores predeterminados respetados.
`nullable-select` ^v1.9.0	booleano	`false`	Si la `select` debe aceptar `null` o no.
`preventHide` ^v1.11.0	booleano	`false`	Si mantener la entrada abierta o no, permitiendo al usuario seleccionar múltiples entradas

modo

Nuevo en v1.4.0

Determina el evento que desencadena v-model . Puede ser uno de 'input' (predeterminado) o 'select' .

Por ejemplo, si se elige 'input' , entonces v-model actualizará el valor cada vez que se active un evento input , configurando la cadena de entrada.

Lo mismo ocurre con 'select' : el modelo v cambia solo cuando se selecciona algo de la lista, estableciendo el valor seleccionado (cadena, objeto o lo que sea) en su argumento.

Un caso de uso adecuado es cuando uno quiere usar el componente solo para vincular selección y entrada personalizada para vincular texto:

 < vue-simple-suggest v-model =" selected " mode =" select " >
  < input v-model =" text " >
</ vue-simple-suggest >

Eventos emitidos

Nombre	Argumentos	Descripción
`input`	evento de entrada HTML	Una proyección hacia afuera del evento de la entrada actual.
`focus`	evento de enfoque HTML	Una proyección hacia afuera del evento de la entrada actual.
`blur`	evento de enfoque HTML	Una proyección hacia afuera del evento de la entrada actual.
`select`	Sugerencia seleccionada	Se activa al seleccionar sugerencias (mediante un clic del mouse o presionando una tecla).
`hover`	Sugerencia suspendida, elemento de destino	Se activa cada vez que se resalta una nueva sugerencia (mediante el movimiento del cursor o las flechas del teclado).
`suggestion-click`	Sugerencia seleccionada, evento de clic HTML	Se activa al hacer clic en el elemento de sugerencia.
`show-list`	-	Se activa cada vez que se cambia la lista de sugerencias para mostrarse.
`hide-list`	-	Se activa cada vez que se oculta la lista de sugerencias.
`request-start`	Valor de entrada actual (consulta)	Se activa cada vez que una función `list` comienza a ejecutarse.
`request-done`	Lista de sugerencias resultantes	Se activa cuando una función `list` devuelve con éxito un resultado y reenvía ese resultado como argumento.
`request-failed`	La excepción disruptiva	Se activa si se produce una excepción durante la ejecución de una función `list` .

Métodos de referencia

accedido a través de $refs.*your ref name here*

Nombre	Argumentos	Descripción
`showList`	-	Muestra la lista de sugerencias. Emite el evento respetado.
`hideList`	-	Oculta la lista de sugerencias. Emite el evento respetado.
`getSuggestions`	`query` : cadena	Obtiene y procesa sugerencias de la `list` de accesorios. Devuelve una promesa. Emite los eventos `requestStart` , `requestDone` y `requestFailed` .
`research`	-	`getSuggestions` no rebotados en el valor de entrada actual.
`clearSuggestions`	-	Borra la matriz `suggestions` .
`select`	sugerencia	Selecciona la sugerencia aprobada. Emite el evento respetado.
`hover`	sugerencia	Pasa el cursor sobre la sugerencia aprobada. Emite el evento respetado.
`displayProperty`	sugerencia	Devuelve la propiedad mostrada de una sugerencia.
`valueProperty`	sugerencia	Devuelve la propiedad de valor de una sugerencia.
`setText` ^v1.9.0	texto	Establece de forma fiable texto personalizado en el campo de entrada.
`autocompleteText` ^v1.10.0	sugerencia	Autocompleta el texto de entrada utilizando la sugerencia pasada como único argumento.

Controladores de eventos de referencia

accedido a través de $refs.*your ref name here*

Puede utilizarlos para imitar algunos de los comportamientos del componente.

Nombre	Argumentos	Descripción
`onShowList`		Se invoca cuando es necesario mostrar una lista de sugerencias.
`showSuggestions`		Muestra una lista de sugerencias y actualiza los datos si es necesario.
`onInput`	evento de entrada HTML	Se invoca cada vez que se cambia el texto de entrada. Emite el evento `input` .
`onFocus`	evento de enfoque HTML	Se invoca cada vez que la entrada se enfoca y emite el evento `focus` .
`onBlur`	evento de enfoque HTML	Antónimo de `onFocus` .
`onAutocomplete`	-	Se invoca cuando se presiona el método abreviado de teclado de autocompletar. Selecciona la primera sugerencia.
`onListKeyUp`	Evento de clave HTML	Invocado al activar el componente. Se utiliza internamente para ocultar la lista.
`onKeyDown`	Evento de pulsación de tecla HTML	Invocado al presionar el componente. Se utiliza internamente para mostrar la lista, actualizar sugerencias y evitar el envío de formularios.
`moveSelection`		Se invoca cuando es necesario cambiar el elemento suspendido.
`suggestionClick`	`suggestion` , evento de clic HTML	Se invoca ante cualquier clic de sugerencia. Se puede utilizar para emular dicho clic desde fuera del componente.

Datos de referencia

accedido a través de $refs.*your ref name here*

Nombre	Por defecto	Descripción
`selected`	`null`	Elemento actualmente seleccionado.
`hovered`	`null`	Elemento actualmente suspendido.
`suggestions`	`[]`	Lista de sugerencias actuales.
`textLength`	`0`	Longitud del texto en la entrada.
`listShown`	`false`	¿Se muestra la lista de sugerencias?
`inputElement`	`null`	HTMLInputElement utilizado actualmente.
`canSend`	`true`	Si se puede ejecutar la getListFuncion asignada.
`timeoutInstance`	`null`	El tiempo de espera hasta la próxima ejecución de getListFunction.
`text`	`$props.value`	Texto de entrada actual.
`slotIsComponent`	`false`	Si esta entrada personalizada actual es un componente de vue.
`listIsRequest`	-	Si la propiedad de la lista es una función.
`input`	-	Una referencia a la entrada actual (componente o vainilla).
`hoveredIndex`	-	El índice actual del elemento suspendido.
`controlScheme`	Controles predeterminados	El esquema de controles actual.
`isPlainSuggestion`	`false`	Si la lista de sugerencias actual consta de cadenas simples (no de objetos).
`isClicking`	`false`	`true` si el usuario hace clic actualmente.
`isOverList`	`false`	`true` si el usuario actualmente pasa el cursor sobre la lista de sugerencias.
`isInFocus`	`false`	`true` si el componente está actualmente enfocado.
`isTabbed`	`false`	`true` si el usuario presionó el tabulador mientras el componente está enfocado.
`isSelectedUpToDate`	`false`	`true` si el usuario no ha realizado ninguna entrada desde la última selección, por lo que la selección sigue siendo relevante.

Tragamonedas

Entrada personalizada

ranura predeterminada (opcional)

Admite anidamiento. Los accesorios de entrada se pueden pasar a una entrada personalizada para evitar su procesamiento mediante vue-simple-suggest. El valor predeterminado es una entrada simple con accesorios pasados a vue-simple-suggest.

Advertencia: v-model en una entrada personalizada NO ES lo mismo que v-model en vue-simple-suggest.

 <!--  Default HTMLInputElement example:  -->
< vue-simple-suggest v-model =" model " placeholder =" Text here " type =" search " pattern =" [a-z]+ "/>

 <!--  Vanilla HTMLInputElement example 1:  -->
< vue-simple-suggest >
  < input pattern =" [a-z]+ " >
</ vue-simple-suggest >

 <!--  Vanilla HTMLInputElement example 2:  -->
< vue-simple-suggest v-model =" model " placeholder =" Text here " type =" search " >
</ vue-simple-suggest >

 <!--  Vanilla HTMLInputElement example 3 (fully equivalent to the second example):  -->
< vue-simple-suggest v-model =" model " >
  < input placeholder =" Text here " type =" search " >
</ vue-simple-suggest >

 <!--  Vanilla HTMLInputElement example 4 (nested):  -->
< vue-simple-suggest v-model =" model " >
  < div >
    < section >
      < input type =" email " >
    </ section >
  </ div >
</ vue-simple-suggest >

 <!--  Vue component example (also supports nesting):  -->
< vue-simple-suggest v-model =" vModelGoesHere " >
  < my-custom-input-somponent :value =" initialInputValueGoesHere " > </ my-custom-input-somponent >
</ vue-simple-suggest >

Advertencias sobre los componentes de entrada personalizados:

Para trabajar con vue-simple-suggest su componente de entrada personalizado debe seguir ciertos comportamientos estándar.

El componente de entrada personalizado debe (para funcionar correctamente):

Emitir un evento input .
Emite eventos focus y blur .
Tener una propuesta value .

El componente de entrada personalizado debe (para evitar limitaciones de uso):

No detener ninguna propagación de eventos desde el elemento HTML de entrada interno.
Reenvíe un argumento de evento original con eventos focus y blur .

Si vue-simple-suggest con su componente personalizado no parece reaccionar a los cambios de variables externas, vincule el modelo v de ambos componentes a la misma variable, así:

 < vue-simple-suggest v-model =" model " >
  < my-custom-input-somponent v-model =" model " > </ my-custom-input-somponent >
</ vue-simple-suggest >

Accesibilidad en entrada personalizada

Nuevo en v1.9.0

vue-simple-suggest inyecta automáticamente 3 atributos ARIA necesarios para el elemento <input> predeterminado y cualquier entrada personalizada, siempre que su componente de entrada personalizado contenga un elemento html <input> .

Estos atributos garantizan que los usuarios que dependen de lectores de pantalla puedan utilizar la función de autocompletar.

Nombre	Valor	Descripción
aria-autocompletar	`"list"`	Indica que el comportamiento de autocompletar de la entrada de texto es sugerir una lista de valores posibles en una ventana emergente.
controles-aria	IDREF de lista `suggestions`	IDREF del elemento emergente que enumera los valores sugeridos.
aria-descendiente activo	IDREF de la opción flotante	Permite que las tecnologías de asistencia sepan qué elemento la aplicación considera enfocado mientras el enfoque DOM permanece en el elemento de entrada.

Elemento de sugerencia personalizado

espacio suggestion-item (opcional)

Descripción

Permite definiciones HTML personalizadas de los elementos de sugerencia en una lista. El valor predeterminado es <span>{{ displayAttribute(suggestion) }}</span>

Acepta el objeto suggestion y un texto query como valores de atributo slot-scope .

 <!-- Example (book suggestions): -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, query } " >
    < div > {{ suggestion.title }} by {{ suggestion.author }} </ div >
  </ div >
</ vue-simple-suggest >

Botones personalizados dentro de los elementos de sugerencia

Si desea agregar algunos botones de acción a los elementos de sugerencia, simplemente use el modificador de directiva .stop para evitar el suggestion-click predeterminado:

 <!-- Example (editable book suggestion): -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, query } " >
    < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
    < button @click.stop =" remove(suggestion) " > remove from list </ button >
    < button @click.stop =" like(suggestion) " > add to favorites </ button >
  </ div >
</ vue-simple-suggest >

En este caso, los botones SÓLO ejecutarán el método vinculado y no seleccionarán el elemento sugerido.

Autocompletar manualmente

Si es necesario autocompletar la sugerencia en la entrada en lugar de seleccionarla (como en las sugerencias móviles de la búsqueda de Google), puede usar la función autocomplete() en el alcance del espacio:

 <!-- Example: -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, autocomplete } " >
    < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
    < button @click.stop =" autocomplete() " > Complete input </ button >
  </ div >
</ vue-simple-suggest >

o en los métodos de referencia:

 < template >
  < vue-simple-suggest ref =" suggest " >
    < div slot =" suggestion-item " slot-scope =" { suggestion } " >
      < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
      < button @click.stop =" onAutocompleteButtonClick(suggestion) " > Complete input </ button >
    </ div >
  </ vue-simple-suggest >
</ template >

< script >
export default {
  //...
  methods : {
    onAutocompleteButtonClick ( suggestion ) {
      this . $refs . suggest . autocompleteText ( suggestion ) ;
    }
  }
  //...
}
</ script >

Datos de referencia

En cooperación con los campos de referencia, este espacio se puede utilizar para transformar drásticamente el comportamiento de la lista de sugerencias.

Uno de los ejemplos más simples: resaltar el texto de la consulta en los resultados:

 < div slot =" suggestion-item " slot-scope =" scope " >
  < span v-html =" boldenSuggestion(scope) " > </ span >
</ div >

 boldenSuggestion ( scope ) {
  if ( ! scope ) return scope ;

  const { suggestion , query } = scope ;

  let result = this . $refs . suggestComponent . displayProperty ( suggestion ) ;

  if ( ! query ) return result ;

  const texts = query . split ( / [s-_/\|.] / gm ) . filter ( t => ! ! t ) || [ '' ] ;
  return result . replace ( new RegExp ( '(.*?)(' + texts . join ( '|' ) + ')(.*?)' , 'gi' ) , '$1<b>$2</b>$3' ) ;
}

Resultado a través de la API de búsqueda de Google Libros:

Ranuras personalizadas para artículos varios

ranuras misc-item-above y misc-item-below (opcional)

Permitir que los elementos personalizados se muestren en la lista de sugerencias. Estos elementos nunca desaparecen de la lista, ni se pueden seleccionar ni pasar el cursor sobre ellos.

Se pueden utilizar para decoración, cargadores, mensajes de error, etc.

Estas ranuras no tienen valores predeterminados, por lo que no se muestran hasta que se definen.

Acepte la matriz suggestions y un texto query como valores de atributo slot-scope .

 <!-- Examples: -->
< vue-simple-suggest >
  < template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
    < div class =" misc-item " >
      < span > You're searching for {{ query }}. </ span >
    </ div >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
  </ template >

  < div slot =" misc-item-below " slot-scope =" { suggestions } " v-if =" isLoading " class =" misc-item " >
    < span > Loading... </ span >
  </ div >
</ vue-simple-suggest >

Estas ranuras también se pueden usar para manejar resultados vacíos, como este:

 <!-- Main slot template -->
< template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
  < div class =" misc-item " >
    < span > You're searching for '{{ query }}'. </ span >
  </ div >

  <!-- Sub-template if have any suggestions -->
  < template v-if =" suggestions.length > 0 " >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
    < hr >
  </ template >

  <!-- Show "No result" otherwise, if not loading new ones -->
  < div class =" misc-item " v-else-if =" !loading " >
    < span > No results </ span >
  </ div >
</ template >

Colaboradores

Gracias a estas maravillosas personas (tecla emoji):

_alexey ?	_karen ?	_{Simeón Kerkola} ?	_{Roberson Costa} ?	_{Rosdi Kasim}	_{antoinematyja} ?	_{Matías Martín} ?
_{Rob Cerebro} ? ?	_{Señor Wook} ?	_nattam ?	_petr ?	_RMFogarty	_{Brian Monsales}	_mila76 ?
_{Andriy Löfberg} ?	_{Bruno Montero} ?	_{hannesaasamets} ?	_Palanqueta ?	_{Will Plaehn} ?	_lauri911 ?	_{Alex Hyriavets} ?
_{Behnood Khani} ?	_{Hay Kranen}	_Shrpne ? ?	_{Peta Dragos-Andrei} ?	_shoito	_yamagen0915 ?

Este proyecto sigue la especificación de todos los contribuyentes. ¡Las contribuciones de cualquier tipo son bienvenidas!

Expandir