Download vue2 autocomplete - download do código-fonte vue2 autocomplete

Preenchimento automático do Vue 2

Componente de preenchimento automático para Vue 2. É baseado no vue-autocomplete. DEMO AO VIVO AQUI!

vue Autocomplete component

Instalar

Você pode importar vue2-autocomplete.vue para seu arquivo de componente vue assim e processá-lo com seu pré-processador.

Você pode instalá-lo via NPM

npm install vue2-autocomplete-js

Ou apenas coloque depois do 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 >

Estilo de importação

Não se esqueça de importar o css do vue 2. Você pode vinculá-lo via html

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

Ou você pode importá-lo usando commonJS

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

Seu estilo é muito personalizável. Você pode colocar qualquer CSS sobre ele. E você pode adicionar uma classe personalizada por meio de seu suporte.

Módulo de importação

 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 >

Adereços disponíveis

 < 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 >

Adereços

url* (Sequência)

o URL deve estar ativo (não do arquivo). o componente irá buscar JSON deste URL e passar uma consulta de parâmetros (padrão: q ). como:

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

Não há filtro e limite de ação dentro do componente. Então, faça isso na lógica da sua API.

parâmetro (String: "q")

nome do parâmetro de pesquisa a ser consultado na chamada Ajax. o padrão é q

min (Número: 0)

Caracteres mínimos digitados antes de realizar a consulta de pesquisa. o padrão é 0

âncora* (String)

É um caminho de propriedade do objeto usado para âncora na lista de sugestões. O exemplo anchor="name" obterá a propriedade name do seu objeto JSON. Como ("Bambang", "Sukijan", "Bejo") na demo acima. Ou você pode alcançar o valor profundo do seu objeto. Como anchor="geometry.location.lat"

rótulo (String)

O mesmo que âncora, mas é usado para legenda ou descrição da lista

opções (matriz)

Passe manualmente uma matriz de opções de lista para o preenchimento automático.

filterByAnchor (Booleano: verdadeiro)

Ao usar adereços de opções, você pode preencher automaticamente para filtrar seus dados. Ou você pode simplesmente mostrar seus dados diretamente, sem nenhum filtro de preenchimento automático. As opções serão filtradas por âncora e de acordo com a entrada do usuário.

encodeParams (Booleano: verdadeiro)

O preenchimento automático encodeURIComponent todos os seus parâmetros antes do envio do ajax, quando este adereço for definido como true . O padrão é true #35

debounce (Número)

Tempo de atraso antes de fazer o ajax para os dados

obrigatório (booleano)

Atributo obrigatório para entrada

espaço reservado (String)

Espaço reservado para entrada

nomedaclasse (String)

Nome de classe personalizado para componente de preenchimento automático

classes (objeto)

Classe personalizada específica para cada peça. disponíveis: wrapper, entrada, lista e item

identificação (String)

Nome de ID personalizado para componente de preenchimento automático

debounce (número)

Número de milissegundos durante os quais o usuário deve parar de digitar antes que a solicitação seja enviada. O padrão é 0, o que significa que todas as solicitações são enviadas imediatamente.

processo (Função)

Função para processar o resultado da API. Deve retornar uma matriz de entradas ou um objeto cujas propriedades possam ser enumeradas.

modelo (Função)

Função para processar cada resultado. Assume o tipo de um elemento de resposta da API e deve retornar dados HTML.

Eventos de retorno de chamada

Você pode fazer um evento de retorno de chamada por meio de adereços.

onInput (Função)

Evento On Input no preenchimento automático

onShow (Função)

Evento On Show na lista de preenchimento automático

onBlur (Função)

Quando o preenchimento automático está desfocado

onHide (Função)

Quando a lista de preenchimento automático está oculta

onFocus (Função)

Quando a entrada de preenchimento automático está no modo de foco

onSelect (Função)

Quando o usuário seleciona um item na lista

onBeforeAjax (Função)

Antes do envio do ajax

onAjaxProgress (Função)

Enquanto o ajax está buscando os dados

onAjaxLoaded (Função)

Quando o processo ajax está totalmente carregado

onShouldGetData (Função)

Processe manualmente todo o processo ajax. Se for uma promessa, deverá resolver as opções da lista de preenchimento automático. Caso não seja uma Promise, você pode passar manualmente as opções para os adereços do autocomplete

 < 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 ( ) ;
    } ,
  }
}

processo (Função)

Processe o resultado antes de recuperar a matriz de resultados. Você pode moldar seus dados aqui antes de serem passados para o preenchimento automático

onShouldRenderChild (Função)

Quer usar um modelo personalizado para a lista? Agora você pode fazer isso!

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

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

Métodos

Você pode fazer alguns métodos acessando o componente via javascript.

 this . $refs . autocomplete . someMethod ( )

setValue (String)

Para definir o valor da entrada de preenchimento automático

Obrigado por tornar isso útil ~

Vamos conversar sobre alguns projetos comigo

Basta entrar em contato comigo em:

E-mail: [email protected]
ID do Skype: bosnaufal254
Twitter: @BosNaufal

Licença

Expandir