vue2 autocomplete

Vue 2 Autocompletar

Componente de autocompletar para Vue 2. Está basado en vue-autocomplete. ¡DEMOSTRACIÓN EN VIVO AQUÍ!

Instalar

Puede importar vue2-autocomplete.vue a su archivo de componente vue de esta manera y procesarlo con su preprocesador.

Puedes instalarlo a través de NPM

npm install vue2-autocomplete-js

O simplemente póngalo después de Vue JS ~

 < script src =" https://vuejs.org/js/vue.min.js " > </ script >
< script src =" ./dist/vue2-autocomplete.js " > </ script >
< script >
  // Don't Forget to register it
  new Vue ( {
    components : {
      autocomplete : Vue2Autocomplete
    }
  } ) ;
</ script > 

Importar estilo

No olvides importar vue 2 css. Puedes vincularlo vía html.

 < link rel =" stylesheet " href =" vue2-autocomplete-js/dist/style/vue2-autocomplete.css " >

O puedes importarlo usando commonJS

 require ( 'vue2-autocomplete-js/dist/style/vue2-autocomplete.css' )

Su estilo es muy personalizable. Puedes ponerle cualquier CSS. Y puedes agregar una clase personalizada a través de su accesorio.

Módulo de importación

 import Autocomplete from 'vue2-autocomplete-js'
// Or
var Autocomplete = require ( 'vue2-autocomplete-js' ) ; 

Uso

 < template >

  < autocomplete
    url =" http://localhost/proyek/goodmovie/api/api/v1/search "
    anchor =" title "
    label =" writer "
    :on-select =" getData " >
  </ autocomplete >

</ template >


< script >

  import Autocomplete from 'vue2-autocomplete-js' ;

  export default {

    components : { Autocomplete } ,

    methods : {
      getData ( obj ) {
        console . log ( obj ) ;
      }
    }
  } ;

</ script >

Accesorios disponibles

 < template >

  < autocomplete
    url =" http://localhost/proyek/goodmovie/api/api/v1/search "
    anchor =" title "
    label =" writer "
    :onSelect =" getData "
    :customParams =" { token: 'dev' } "
    :customHeaders =" { Authorization: 'bearer abc123' } "


    :required =" true "
    id =" custom id "
    className =" custom class name "
    :classes =" { wrapper: 'form-wrapper', input: 'form-control', list: 'data-list', item: 'data-list-item' } "
    placeholder =" placeholder "
    :initValue =" initial value "


    :options =" [] "
    :min =" 3 "
    :debounce =" 2000 "
    :filterByAnchor =" true "
    :encodeParams =" true "

    :onShouldGetData =" getData "
    :onInput =" callbackEvent "
    :onShow =" callbackEvent "
    :onBlur =" callbackEvent "
    :onHide =" callbackEvent "
    :onFocus =" callbackEvent "
    :onSelect =" callbackEvent "
    :onBeforeAjax =" callbackEvent "
    :onAjaxProgress =" callbackEvent "
    :onAjaxLoaded =" callbackEvent "
    :onShouldRenderChild =" renderChild "
  >
  </ autocomplete >

</ template > 

Accesorios

URL* (Cadena)

la URL debe estar activa (no desde el archivo). el componente obtendrá JSON de esta URL y pasará una consulta de parámetros (predeterminado: q ). como:

 http://some-url.com/API/list?q=

No hay filtro ni acción límite dentro del componente. Entonces, hazlo en tu lógica API.

parámetro (Cadena: "q")

nombre del parámetro de búsqueda a consultar en la llamada Ajax. el valor predeterminado es q

mín. (Número: 0)

Entrada mínima de caracteres escritos antes de realizar la consulta de búsqueda. el valor predeterminado es 0

ancla* (Cadena)

Es una ruta de propiedad de objeto que se utiliza para Anchor en la lista de sugerencias. El ejemplo anchor="name" obtendrá la propiedad de nombre de su objeto JSON. Como ("Bambang", "Sukijan", "Bejo") en la demostración anterior. O puedes alcanzar el valor profundo de tu objeto. Como anchor="geometry.location.lat"

etiqueta (cadena)

Igual que el ancla pero se usa para subtítulos o descripción de la lista.

opciones (matriz)

Pase manualmente una matriz de opciones de lista al autocompletado.

filterByAnchor (booleano: verdadero)

Cuando utiliza accesorios de opciones, puede tener la opción de autocompletar para filtrar sus datos. O simplemente puede mostrar sus datos directamente sin ningún filtro de autocompletar. Las opciones se filtrarán por ancla y según la entrada del usuario.

codificarParams (booleano: verdadero)

Autocompletar encodeURIComponent todos sus parámetros antes del envío de ajax, cuando estos accesorios se establezcan en true . El valor predeterminado es true #35

rebote (Número)

Tiempo de retraso antes de hacer el ajax para los datos.

requerido (booleano)

Atributo requerido para la entrada

marcador de posición (cadena)

Marcador de posición para entrada

nombre de clase (cadena)

Nombre de clase personalizado para el componente de autocompletar

clases (objeto)

Clase personalizada específica para cada pieza. disponible: contenedor, entrada, lista y elemento

identificación (cadena)

Nombre de identificación personalizado para el componente de autocompletar

rebote (número)

Número de milisegundos durante los cuales el usuario debe dejar de escribir antes de enviar la solicitud. El valor predeterminado es 0, lo que significa que todas las solicitudes se envían inmediatamente.

proceso (Función)

Función para procesar el resultado de la API. Debe devolver una matriz de entradas o un objeto cuyas propiedades puedan enumerarse.

plantilla (Función)

Función para procesar cada resultado. Toma el tipo de elemento de respuesta API y debe devolver datos HTML.

Eventos de devolución de llamada

Puede realizar un evento de devolución de llamada a través de accesorios.

en entrada (función)

En evento de entrada en autocompletar

onShow (Función)

En Mostrar evento en la lista de autocompletar

onBlur (Función)

Cuando el autocompletado está borroso

onHide (Función)

Cuando la lista de autocompletar está oculta

onFocus (Función)

Cuando la entrada se completa automáticamente en el modo de enfoque

onSelect (Función)

Cuando el usuario ha seleccionado un elemento de la lista

onBeforeAjax (Función)

Antes del envío ajax

onAjaxProgress (Función)

Mientras ajax está recuperando los datos

onAjaxLoaded (Función)

Cuando el proceso ajax está totalmente cargado

onShouldGetData (Función)

Procese manualmente todo el proceso ajax. Si es una Promesa, debería resolver las opciones para la lista de autocompletar. Si no es una Promesa, puede pasar manualmente las opciones a los accesorios de autocompletar.

 < autocomplete
  anchor =" formatted_address "
  label =" formatted_address "
  :onShouldGetData =" getData "
>
</ autocomplete > 

methods: {
  promise ( value ) {
    return new Promise ( ( resolve , reject ) => {
      let ajax = new XMLHttpRequest ( ) ;
      ajax . open ( 'GET' , `https://maps.googleapis.com/maps/api/geocode/json?address= ${ value } ` , true ) ;
      // On Done
      ajax . addEventListener ( 'loadend' , ( e ) => {
        const { responseText } = e . target
        let response = JSON . parse ( responseText ) ;
        // The options to pass in the autocomplete
        resolve ( response . results )
      } ) ;
      ajax . send ( ) ;
    } )
  } ,

  nonPromise ( ) {
    getData ( value ) {
      let ajax = new XMLHttpRequest ( ) ;
      ajax . open ( 'GET' , `https://maps.googleapis.com/maps/api/geocode/json?address= ${ value } ` , true ) ;
      // On Done
      ajax . addEventListener ( 'loadend' , ( e ) => {
        const { responseText } = e . target
        let response = JSON . parse ( responseText ) ;
        // The options to pass in the autocomplete props
        this . options = response . results ;
      } ) ;
      ajax . send ( ) ;
    } ,
  }
} 

proceso (Función)

Procese el resultado antes de recuperar la matriz de resultados. Puedes dar forma a tus datos aquí antes de que pasen al autocompletado.

onShouldRenderChild (Función)

¿Quieres usar una plantilla personalizada para la lista? ¡Ahora puedes hacerlo!

 < autocomplete
  anchor =" formatted_address "
  label =" formatted_address "
  :onShouldRenderChild =" renderChild "
>
</ autocomplete > 

methods: {
  renderChild ( data ) {
    return `
      <img src=" ${ data . src } " />
      <span> ${ data . something } </span>
    `
  } ,
} 

Métodos

Puede realizar algunos métodos accediendo al componente a través de javascript.

 this . $refs . autocomplete . someMethod ( ) 

establecerValor (cadena)

Para establecer el valor de la entrada de autocompletar

Gracias por hacer esto útil ~

Hablemos de algunos proyectos conmigo.

Sólo póngase en contacto conmigo en:

• Correo electrónico: [email protected]
• Identificación de Skype: bosnaufal254
• Twitter: @BosNaufal

Licencia

MIT Copyright (c) 2016 - para siempre Naufal Rabbani