vue2 autocomplete Télécharger - vue2 autocomplete Téléchargement du code source

Vue 2, saisie semi-automatique

Composant de saisie semi-automatique pour Vue 2. Il est basé sur vue-autocomplete. DÉMO EN DIRECT ICI !

vue Autocomplete component

Installer

Vous pouvez importer vue2-autocomplete.vue dans votre fichier de composant vue comme ceci et le traiter avec votre préprocesseur.

Vous pouvez l'installer via NPM

npm install vue2-autocomplete-js

Ou mettez-le simplement après 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 >

Style d'importation

N'oubliez pas d'importer le CSS de vue 2. Vous pouvez le lier via HTML

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

Ou vous pouvez l'importer en utilisant commonJS

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

Son style est très personnalisable. Vous pouvez mettre n'importe quel CSS dessus. Et vous pouvez ajouter une classe personnalisée via son accessoire.

Module d'importation

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

Usage

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

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

Accessoires

URL* (Chaîne)

l'URL doit être active (et non issue d'un fichier). le composant récupérera JSON à partir de cette URL et transmettra une requête params (par défaut : q ). comme:

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

Il n'y a pas de filtre ni d'action limite à l'intérieur du composant. Alors, faites-le dans votre logique API.

paramètre (Chaîne : "q")

nom du paramètre de recherche à interroger dans l'appel Ajax. la valeur par défaut est q

min (Nombre : 0)

Saisissez un minimum de caractères saisis avant d'effectuer la requête de recherche. la valeur par défaut est 0

ancre* (Chaîne)

Il s'agit d'un chemin de propriété d'objet utilisé pour Anchor dans la liste de suggestions. L'exemple anchor="name" obtiendra la propriété name de votre objet JSON. Comme ("Bambang", "Sukijan", "Bejo") dans la démo ci-dessus. Ou vous pouvez atteindre la valeur profonde de votre objet. Comme anchor="geometry.location.lat"

étiquette (Chaîne)

Identique à l'ancre mais il est utilisé pour le sous-titre ou la description de la liste

options (Tableau)

Transmettez manuellement un tableau d’options de liste à la saisie semi-automatique.

filterByAnchor (Booléen : vrai)

Lorsque vous utilisez des accessoires d'options, vous pouvez utiliser la saisie semi-automatique pour filtrer vos données. Ou vous pouvez simplement afficher vos données directement sans aucun filtre de saisie semi-automatique. Les options seront filtrées par ancre et en fonction de la saisie de l'utilisateur.

encodeParams (booléen : vrai)

La saisie semi-automatique encodeURIComponent tous vos paramètres avant l'envoi ajax, lorsque ces accessoires sont définis sur true . La valeur par défaut est true #35

anti-rebond (Nombre)

Délai avant de faire l'ajax pour les données

obligatoire (booléen)

Attribut obligatoire pour la saisie

espace réservé (Chaîne)

Espace réservé pour la saisie

Nom de classe (Chaîne)

Nom de classe personnalisé pour le composant de saisie semi-automatique

classes (Objet)

Classe personnalisée spécifique pour chaque pièce. disponible : wrapper, entrée, liste et élément

identifiant (Chaîne)

Nom d'identifiant personnalisé pour le composant de saisie semi-automatique

anti-rebond (nombre)

Nombre de millisecondes pendant lesquelles l'utilisateur doit arrêter de taper avant que la requête ne soit envoyée. La valeur par défaut est 0, ce qui signifie que toutes les demandes sont envoyées immédiatement.

processus (Fonction)

Fonction avec laquelle traiter le résultat de l'API. Doit renvoyer un tableau d'entrées ou un objet dont les propriétés peuvent être énumérées.

modèle (Fonction)

Fonction avec laquelle traiter chaque résultat. Prend le type d'un élément de réponse API et doit renvoyer des données HTML.

Événements de rappel

Vous pouvez créer un événement de rappel via des accessoires.

onEntrée (Fonction)

Sur l'événement d'entrée en saisie semi-automatique

onShow (Fonction)

Sur Afficher l'événement dans la liste de saisie semi-automatique

onFlou (Fonction)

Lorsque la saisie semi-automatique est estompée

onMasquer (Fonction)

Lorsque la liste de saisie semi-automatique est masquée

onFocus (Fonction)

Lors de la saisie semi-automatique en mode focus

surSélection (Fonction)

Lorsque l'utilisateur a sélectionné un élément dans la liste

onAvantAjax (Fonction)

Avant l'envoi ajax

onAjaxProgress (Fonction)

Pendant qu'Ajax récupère les données

onAjaxLoaded (Fonction)

Quand le processus ajax est totalement chargé

onShouldGetData (Fonction)

Traitez manuellement l'ensemble du processus ajax. S'il s'agit d'une promesse, cela devrait résoudre les options de la liste de saisie semi-automatique. S'il ne s'agit pas d'une promesse, vous pouvez transmettre manuellement les options aux accessoires de saisie semi-automatique.

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

processus (Fonction)

Traitez le résultat avant de récupérer le tableau de résultats. Vous pouvez façonner vos données ici avant qu'elles ne soient transmises à la saisie semi-automatique.

onShouldRenderChild (Fonction)

Voulez-vous utiliser un modèle personnalisé pour la liste ? Maintenant, vous pouvez le faire !

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

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

Méthodes

Vous pouvez utiliser certaines méthodes en accédant au composant via javascript.

 this . $refs . autocomplete . someMethod ( )

setValue (Chaîne)

Pour définir la valeur de l'entrée de saisie semi-automatique

Merci d'avoir rendu cela utile ~

Parlons de quelques projets avec moi

Contactez-moi simplement à :

Courriel : [email protected]
Identifiant Skype : bosnaufal254
Twitter : @BosNaufal

Licence

Développer