vue2 autocomplete
1.0.0
Autocomplete-Komponente für Vue 2. Sie basiert auf Vue-Autocomplete. LIVE-DEMO HIER!
Sie können vue2-autocomplete.vue auf diese Weise in Ihre Vue-Komponentendatei importieren und mit Ihrem Präprozessor verarbeiten.
Sie können es über NPM installieren
npm install vue2-autocomplete-jsOder setzen Sie es einfach nach 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 > Vergessen Sie nicht, Vue 2 CSS zu importieren. Sie können es per HTML verlinken
< link rel =" stylesheet " href =" vue2-autocomplete-js/dist/style/vue2-autocomplete.css " >Oder Sie können es mit commonJS importieren
require ( 'vue2-autocomplete-js/dist/style/vue2-autocomplete.css' )Sein Stil ist sehr anpassbar. Sie können ein beliebiges CSS darüber legen. Und Sie können eine benutzerdefinierte Klasse über ihre Requisite hinzufügen.
import Autocomplete from 'vue2-autocomplete-js'
// Or
var Autocomplete = require ( 'vue2-autocomplete-js' ) ; < 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 >Verfügbare Requisiten
< 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 > Die URL muss aktiv sein (nicht aus Datei). Die Komponente ruft JSON von dieser URL ab und übergibt eine Parameterabfrage (Standard: q ). wie:
http://some-url.com/API/list?q=
Innerhalb der Komponente gibt es keine Filter- und Begrenzungsaktionen. Machen Sie es also in Ihrer API-Logik.
Name des Suchparameters, der im Ajax-Aufruf abgefragt werden soll. Der Standardwert ist q
Mindestens eingegebene Zeichen, bevor die Suchabfrage durchgeführt wird. Der Standardwert ist 0
Es handelt sich um einen Objekteigenschaftspfad, der für den Anker in der Vorschlagsliste verwendet wird. anchor="name" ruft die Namenseigenschaft Ihres JSON-Objekts ab. Wie („Bambang“, „Sukijan“, „Bejo“) in der Demo oben. Oder Sie erreichen den tiefen Wert Ihres Objekts. Wie anchor="geometry.location.lat"
Identisch mit Anker, wird jedoch für Untertitel oder Beschreibungen der Liste verwendet
Übergeben Sie manuell ein Array von Listenoptionen an die automatische Vervollständigung.
Wenn Sie Options-Requisiten verwenden, können Sie Ihre Daten mithilfe der automatischen Vervollständigung filtern. Oder Sie können Ihre Daten einfach direkt ohne Filter durch die automatische Vervollständigung anzeigen. Die Optionen werden nach Anker und entsprechend der Benutzereingabe gefiltert.
Die automatische Vervollständigung encodeURIComponent alle Ihre Parameter vor dem Ajax-Versand, wenn diese Requisiten auf true gesetzt werden. Der Standardwert ist true #35
Verzögerungszeit, bevor der Ajax für die Daten ausgeführt wird
Erforderliches Attribut für die Eingabe
Platzhalter für die Eingabe
Benutzerdefinierter Klassenname für die Autovervollständigungskomponente
Spezifische benutzerdefinierte Klasse für jedes Teil. Verfügbar: Wrapper, Eingabe, Liste und Element
Benutzerdefinierter ID-Name für die Autovervollständigungskomponente
Anzahl der Millisekunden, die der Benutzer mit der Eingabe aufhören sollte, bevor die Anfrage gesendet wird. Der Standardwert ist 0, was bedeutet, dass alle Anfragen sofort gesendet werden.
Funktion zum Verarbeiten des API-Ergebnisses mit. Sollte ein Array von Einträgen oder ein Objekt zurückgeben, dessen Eigenschaften aufgezählt werden können.
Funktion zur Verarbeitung jedes Ergebnisses. Nimmt den Typ eines API-Antwortelements an und sollte HTML-Daten zurückgeben.
Sie können über Requisiten ein Rückrufereignis durchführen.
Bei Eingabeereignis in der automatischen Vervollständigung
Ein Ereignis in der Autovervollständigungsliste anzeigen
Wenn die automatische Vervollständigung unscharf ist
Wenn die Autovervollständigungsliste ausgeblendet ist
Bei der automatischen Vervollständigung der Eingabe im Fokusmodus
Wenn der Benutzer ein Element in der Liste ausgewählt hat
Vor dem Ajax-Senden
Während Ajax die Daten abruft
Wenn der Ajax-Prozess vollständig geladen ist
Verarbeiten Sie den gesamten Ajax-Prozess manuell. Wenn es sich um ein Versprechen handelt, sollten die Optionen für die Liste der automatischen Vervollständigung aufgelöst werden. Wenn es sich nicht um ein Versprechen handelt, können Sie die Optionen manuell an die Requisiten der automatischen Vervollständigung übergeben
< 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 ( ) ;
} ,
}
} Verarbeiten Sie das Ergebnis, bevor Sie das Ergebnisarray abrufen. Hier können Sie Ihre Daten formen, bevor sie an die automatische Vervollständigung übergeben werden
Möchten Sie eine benutzerdefinierte Vorlage für die Liste verwenden? Jetzt können Sie es schaffen!
< autocomplete
anchor =" formatted_address "
label =" formatted_address "
:onShouldRenderChild =" renderChild "
>
</ autocomplete > methods: {
renderChild ( data ) {
return `
<img src=" ${ data . src } " />
<span> ${ data . something } </span>
`
} ,
} Sie können einige Methoden ausführen, indem Sie über Javascript auf die Komponente zugreifen.
this . $refs . autocomplete . someMethod ( ) Zum Festlegen des Werts der Autovervollständigungseingabe
Kontaktieren Sie mich einfach unter:
MIT Copyright (c) 2016 – für immer Naufal Rabbani
