vue simple suggest
1.11 - Aromatisse
Einfache, aber funktionsreiche Autovervollständigungskomponente für Vue.js
npm install --save vue-simple-suggestWeitere Optionen finden Sie im Installationshandbuch.
Dies ist eine einfache, aber funktionsreiche Vorschlags-/Autovervollständigungskomponente für Vue.js.
Eigentlich ist es so funktionsreich, dass man damit verrückte Sachen machen kann, zum Beispiel
Und als Bonus ist es sehr leicht.
v-model Unterstützung.v-model wechseln (Auswahl/Eingabe).type , tabindex usw.).Alle Requisiten, Ereignisse und Slots sind für diese Komponente OPTIONAL, sodass sie ohne jegliche Konfiguration verwendet werden kann.
Wenn Sie das Gefühl haben, dass etwas Wichtiges fehlt (oder Sie einen Fehler gefunden haben), können Sie gerne ein Problem erstellen. :) :)
Um die Komponente zu verwenden, installieren Sie sie einfach über NPM:
npm install --save vue-simple-suggest
Führen Sie dann in Ihrer Vue.js-Komponente/Seite Folgendes aus ...
Wenn Sie Dinge aus einem statischen Array vorschlagen müssen:
<!-- 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 >Wenn Sie mit asynchronen Daten vom Server arbeiten (Beispiel mit 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 >Ein fortgeschritteneres Beispiel (mithilfe der Wikipedia-Suche) finden Sie in unserer Beispielquelle.
npm install --save vue-simple-suggest
# or
yarn add vue-simple-suggestBei Einbindung über diese Methode installiert sich die Komponente automatisch.
<!-- 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 > /// 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' Neu in
v1.8.3
vue-simple-suggest enthält minimale optionale Polyfills für IE11+ – Object.assign , Element.prototype.closest und Element.prototype.matches . Sie können sie folgendermaßen importieren:
import 'vue-simple-suggest/lib/polyfills' ;
// or
require ( 'vue-simple-suggest/lib/polyfills' ) ;Global:
// You don't need to do it, if including via <script> (umd, iife)
Vue . component ( 'vue-simple-suggest' , VueSimpleSuggest )In Einzeldatei-.vue-Komponenten:
< script >
import VueSimpleSuggest from 'vue-simple-suggest'
import 'vue-simple-suggest/dist/styles.css' // Using a css-loader
export default {
components : {
VueSimpleSuggest
}
}
</ script > # 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 docsNeu in v1.2.0
Dies sind Standard-Tastaturkürzel.
Kann mit der controls -Requisite angepasst werden. Alle Felder in diesem controls sind optional.
Standardschema:
| Schlüssel (Schlüsselcode) | Beschreibung |
|---|---|
Escape (27) | Wenn die Vorschlagsliste angezeigt wird, blenden Sie sie aus. Definiert durch die Eigenschaft hideList . |
ArrowDown (40) | Wenn die Vorschlagsliste ausgeblendet ist, zeigen Sie sie an. Definiert durch showList Eigenschaft. |
ArrowUp (38) / ArrowDown (40) | Blättern Sie durch die Vorschläge (bewegen Sie den Mauszeiger). Definiert durch die Eigenschaften selectionUp / selectionDown respektvoll. |
Enter (13) | Wenn die Liste angezeigt wird – wählt das markierte Element aus. Definiert durch select Eigenschaft. |
(Ctrl/Shift) + Space (32) | Wählen Sie das erste Element in der Liste aus. Definiert durch autocomplete Eigenschaft. Funktioniert mit Ctrl Modifizierertaste oder Shift Modifizierertaste. |
(Ctrl/Shift) + Enter (13) | Wie zuvor, jedoch wird auch die Vorschlagsliste ausgeblendet. |
JS-Objekt:
{
selectionUp : [ 38 ] ,
selectionDown : [ 40 ] ,
select : [ 13 ] ,
showList : [ 40 ] ,
hideList : [ 27 ] ,
autocomplete : [ 32 , 13 ]
} <!-- 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 >Wenn das Erscheinungsbild der Komponente angepasst werden muss, finden Sie hier die interne Klassenstruktur:
// .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 Wenn Sie Ihre vorhandenen Klassen oder Frameworks wie Bootstrap verwenden möchten, können Sie Ihre eigenen Klassen mithilfe der Requisite 'styles' einfügen:
<!-- 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 >Schema:
| Eigentum | Beschreibung |
|---|---|
vueSimpleSuggest | Zusätzlicher Klassenname für das Stammelement der Komponente. |
inputWrapper | Zusätzlicher Klassenname für .input-wrapper Element. |
defaultInput | Zusätzlicher Klassenname für input , wenn keine benutzerdefinierte Eingabekomponente angegeben ist. |
suggestions | Zusätzlicher Klassenname für ul Element der Vorschlagsliste. |
miscItemAbove | Klassenname für den Slot-Wrapper misc-item-above ( li Element selbst). |
suggestItem | Zusätzlicher Klassenname für das Vorschlagselement li -Element. |
miscItemBelow | Klassenname für den Slot-Wrapper misc-item-below ( li Element selbst). |
Neu in v1.8.0
Sie können auch benutzerdefinierte Listenübergänge definieren, indem Sie CSS-Regeln für den Übergang mit dem Namen vue-simple-suggest im .suggestions Div definieren:
. 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 ;
}| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
controls v1.2.0 | Objekt | Siehe Standardsteuerelemente | Bestimmt die Tastaturkürzel in Tastencodes (aus Gründen der Browserkompatibilität). Arrays bieten die Möglichkeit, einer Aktion mehrere Tasten zuzuweisen. Besteht aus 5 Array-Feldern: selectionUp , selectionDown , select , hideList und autocomplete , die alle optional sind. |
max-suggestions | Nummer | 10 | Die maximale Anzahl der anzuzeigenden Vorschläge. Für unendliche Vorschläge auf 0 setzen. |
min-length | Nummer | 1 | Die Mindestanzahl an Symbolen in der Eingabe, um eine Vorschlagsliste auszulösen. vue-simple-suggest verhält sich wie ein Dropdown-Menü, wenn der Wert 0 ist. |
display-attribute | Zeichenfolge | 'title' | Die Eigenschaft in einem Vorschlagsobjekt, die in einer Liste angezeigt werden soll. Unterstützt gepunktete Pfade. |
value-attribute | Zeichenfolge | 'id' | Die Eigenschaft in einem Vorschlagsobjekt, die als eindeutiger Schlüssel verwendet werden soll. Unterstützt gepunktete Pfade. |
list | Funktion oder Array | () => [] | Die Array-Provider-Funktion muss eine Abfrage als einziges Argument akzeptieren. Kann ein Array oder ein Versprechen zurückgeben. Kann asynchron sein. Ohne diese Funktion verhält sich die Komponente wie eine einfache Eingabe. |
debounce | Nummer | 0 | Bestimmt die list (eine Zeit zwischen dem Eingabeereignis und einer Funktionsausführung). |
destyled | Boolescher Wert | false | Ob die Standardgestaltung der Eingabe- und Vorschlagsliste abgebrochen werden soll. |
styles v1.8.0 | Objekt | {} | CSS-Klassen zum Anhängen an den aktuellen Komponentenstil. |
remove-list | Boolescher Wert | false | Wenn „true“, wird die Vorschlagsliste immer ausgeblendet. |
filter-by-query | Boolescher Wert | false | Ob die resultierenden Vorschläge nach der Textabfrage der Eingabe gefiltert werden sollen (in eine Suchkomponente umwandeln). |
filter | Funktion | - | Eine benutzerdefinierte Funktion zum Filtern der Vorschlagsergebnisse, die ein einzelnes Element und eine Abfrage zum Filtern als zwei Argumente akzeptiert. Wird nur verwendet, wenn filter-by-query auf true gesetzt ist. |
mode v1.4.0 | Zeichenfolge | 'input' | Das v-model Event. Bestimmt das Ereignis, das v-model auslöst. Kann entweder 'input' ( v-model bindet eine angezeigte Eigenschaft) oder 'select' ( v-model bindet ein ausgewähltes Element) sein. |
type , value , pattern usw. | Alle HTML5-Eingabeattribute mit ihren respektierten Standardwerten. | ||
nullable-select v1.9.0 | Boolescher Wert | false | Ob die select null akzeptieren soll oder nicht. |
preventHide v1.11.0 | Boolescher Wert | false | Ob die Eingabe offen bleiben soll oder nicht, sodass der Benutzer mehrere Eingaben auswählen kann |
Neu in v1.4.0
Bestimmt das Ereignis, das v-model auslöst. Kann entweder 'input' (Standard) oder 'select' sein.
Wenn beispielsweise 'input' ausgewählt wird, aktualisiert v-model den Wert jedes Mal, wenn ein input ausgelöst wird, und legt die Zeichenfolge der Eingabe fest.
Das Gleiche gilt für 'select' – das V-Modell ändert sich nur, wenn etwas aus der Liste ausgewählt wird, und setzt den ausgewählten Wert (String, Objekt oder was auch immer) auf sein Argument.
Ein geeigneter Anwendungsfall dafür wäre, wenn man die Komponente nur für die Auswahlbindung und benutzerdefinierte Eingaben für die Textbindung verwenden möchte:
< vue-simple-suggest v-model =" selected " mode =" select " >
< input v-model =" text " >
</ vue-simple-suggest > | Name | Argumente | Beschreibung |
|---|---|---|
input | HTML-Eingabeereignis | Eine nach außen gerichtete Projektion des Ereignisses der aktuellen Eingabe. |
focus | HTML-Fokusereignis | Eine nach außen gerichtete Projektion des Ereignisses der aktuellen Eingabe. |
blur | HTML-Fokusereignis | Eine nach außen gerichtete Projektion des Ereignisses der aktuellen Eingabe. |
select | Ausgewählter Vorschlag | Wird bei der Auswahl eines Vorschlags ausgelöst (über einen Mausklick oder einen Tastendruck mit der Eingabetaste). |
hover | Schwebevorschlag, Zielelement | Wird jedes Mal ausgelöst, wenn ein neuer Vorschlag hervorgehoben wird (über eine Cursorbewegung oder Tastaturpfeile). |
suggestion-click | Ausgewählter Vorschlag, HTML-Klickereignis | Wird beim Klicken auf ein Vorschlagselement ausgelöst. |
show-list | - | Wird jedes Mal ausgelöst, wenn die Vorschlagsliste zur Anzeige umgeschaltet wird. |
hide-list | - | Wird jedes Mal ausgelöst, wenn die Vorschlagsliste ausgeblendet wird. |
request-start | Aktueller Eingabewert (Abfrage) | Wird jedes Mal ausgelöst, wenn die Ausführung einer list beginnt. |
request-done | Ergebnisliste mit Vorschlägen | Wird ausgelöst, wenn eine list erfolgreich ein Ergebnis zurückgibt und dieses Ergebnis als Argument weiterleitet. |
request-failed | Die unterbrechende Ausnahme | Wird ausgelöst, wenn während der Ausführung einer list eine Ausnahme auftritt. |
Zugriff über
$refs.*your ref name here*
| Name | Argumente | Beschreibung |
|---|---|---|
showList | - | Zeigt die Vorschlagsliste an. Gibt das respektierte Ereignis aus. |
hideList | - | Blendet die Vorschlagsliste aus. Gibt das respektierte Ereignis aus. |
getSuggestions | query : Zeichenfolge | Ruft Vorschläge von der list -Requisite ab und verarbeitet sie. Gibt ein Versprechen zurück. Gibt die Ereignisse requestStart , requestDone und requestFailed aus. |
research | - | getSuggestions wurden für den aktuellen Eingabewert entprellt. |
clearSuggestions | - | Löscht das suggestions . |
select | Anregung | Wählt den übergebenen Vorschlag aus. Gibt das respektierte Ereignis aus. |
hover | Anregung | Schwebt über dem übergebenen Vorschlag. Gibt das respektierte Ereignis aus. |
displayProperty | Anregung | Gibt die angezeigte Eigenschaft eines Vorschlags zurück. |
valueProperty | Anregung | Gibt die Value-Eigenschaft eines Vorschlags zurück. |
setText v1.9.0 | Text | Legt zuverlässig benutzerdefinierten Text im Eingabefeld fest. |
autocompleteText v1.10.0 | Anregung | Vervollständigt den Eingabetext automatisch unter Verwendung des als einziges Argument übergebenen Vorschlags. |
Zugriff über
$refs.*your ref name here*
Sie können diese verwenden, um einige Verhaltensweisen der Komponente nachzuahmen.
| Name | Argumente | Beschreibung |
|---|---|---|
onShowList | Wird aufgerufen, wenn eine Vorschlagsliste angezeigt werden muss. | |
showSuggestions | Zeigt die Vorschlagsliste an und aktualisiert die Daten bei Bedarf. | |
onInput | HTML-Eingabeereignis | Wird immer dann aufgerufen, wenn der Eingabetext geändert wird. Gibt das input aus. |
onFocus | HTML-Fokusereignis | Wird immer dann aufgerufen, wenn die Eingabe in den Fokus gelangt, und gibt das focus aus. |
onBlur | HTML-Fokusereignis | Antonym zu onFocus . |
onAutocomplete | - | Wird aufgerufen, wenn die Tastenkombination für die automatische Vervollständigung gedrückt wird. Wählt den ersten Vorschlag aus. |
onListKeyUp | HTML-Keyup-Ereignis | Wird beim Keyup der Komponente aufgerufen. Wird intern zum Ausblenden der Liste verwendet. |
onKeyDown | HTML-Keydown-Ereignis | Wird beim Tastendruck der Komponente aufgerufen. Wird intern verwendet, um die Liste anzuzeigen, Vorschläge zu aktualisieren und das Absenden von Formularen zu verhindern. |
moveSelection | Wird aufgerufen, wenn das schwebende Element geändert werden muss. | |
suggestionClick | suggestion , HTML-Klickereignis | Wird bei jedem Vorschlagsklick aufgerufen. Kann verwendet werden, um einen solchen Klick von außerhalb der Komponente zu emulieren. |
Zugriff über
$refs.*your ref name here*
| Name | Standard | Beschreibung |
|---|---|---|
selected | null | Aktuell ausgewähltes Element. |
hovered | null | Derzeit schwebendes Element. |
suggestions | [] | Aktuelle Vorschlagsliste. |
textLength | 0 | Länge des Textes in der Eingabe. |
listShown | false | Wird die Vorschlagsliste angezeigt. |
inputElement | null | Derzeit verwendetes HTMLInputElement. |
canSend | true | Ob die zugewiesene getListFuncion ausgeführt werden kann. |
timeoutInstance | null | Die Zeitüberschreitung bis zur nächsten getListFunction-Ausführung. |
text | $props.value | Aktueller Eingabetext. |
slotIsComponent | false | Ob diese aktuelle benutzerdefinierte Eingabe eine Vue-Komponente ist. |
listIsRequest | - | Ob die Listenstütze eine Funktion ist. |
input | - | Ein Verweis auf die aktuelle Eingabe (Komponente oder Vanilla). |
hoveredIndex | - | Der aktuelle Index des schwebenden Elements. |
controlScheme | Standardsteuerelemente | Das aktuelle Steuerungsschema. |
isPlainSuggestion | false | Ob die aktuelle Vorschlagsliste aus einfachen Zeichenfolgen (keinen Objekten) besteht. |
isClicking | false | true , wenn der Benutzer gerade klickt. |
isOverList | false | true wenn der Benutzer derzeit mit der Maus über die Vorschlagsliste fährt. |
isInFocus | false | true wenn die Komponente derzeit im Fokus ist. |
isTabbed | false | true , wenn der Benutzer die Tabulatortaste gedrückt hat, während die Komponente im Fokus ist. |
isSelectedUpToDate | false | true , wenn der Benutzer seit der letzten Auswahl keine Eingaben vorgenommen hat, die Auswahl also weiterhin relevant ist. |
Standardsteckplatz (optional)
Unterstützt die Verschachtelung. Eingabe-Requisiten können an eine benutzerdefinierte Eingabe übergeben werden, um deren Verarbeitung durch vue-simple-suggest zu vermeiden. Standardmäßig ist eine einfache Eingabe mit Requisiten, die an vue-simple-suggest übergeben werden.
Warnung: v-model auf einer benutzerdefinierten Eingabe ist NICHT dasselbe wie v-model auf 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 >Einschränkungen bei benutzerdefinierten Eingabekomponenten:
Um mit vue-simple-suggest arbeiten zu können, muss Ihre benutzerdefinierte Eingabekomponente bestimmte Standardverhalten befolgen.
Die benutzerdefinierte Eingabekomponente muss (um ordnungsgemäß zu funktionieren):
input aus.focus und blur aus.value .Die benutzerdefinierte Eingabekomponente sollte (um Nutzungseinschränkungen zu vermeiden):
focus und blur weiter. Wenn vue-simple-suggest mit Ihrer benutzerdefinierten Komponente nicht auf externe Variablenänderungen zu reagieren scheint, binden Sie das V-Modell beider Komponenten wie folgt an dieselbe Variable:
< vue-simple-suggest v-model =" model " >
< my-custom-input-somponent v-model =" model " > </ my-custom-input-somponent >
</ vue-simple-suggest > Neu in v1.9.0
vue-simple-suggest fügt automatisch drei notwendige ARIA-Attribute für das Standardelement <input> und alle benutzerdefinierten Eingaben ein, sofern Ihre benutzerdefinierte Eingabekomponente ein HTML-Element <input> enthält.
Diese Attribute stellen sicher, dass die automatische Vervollständigung von Benutzern verwendet werden kann, die auf Screenreader angewiesen sind.
| Name | Wert | Beschreibung |
|---|---|---|
| Aria-Autovervollständigung | "list" | Gibt an, dass das automatische Vervollständigungsverhalten der Texteingabe darin besteht, eine Liste möglicher Werte in einem Popup vorzuschlagen. |
| Aria-Kontrollen | IDREF der suggestions | IDREF des Popup-Elements, das vorgeschlagene Werte auflistet. |
| aria-activedescendant | IDREF der schwebenden Option | Ermöglicht unterstützenden Technologien zu erkennen, welches Element die Anwendung als fokussiert ansieht, während der DOM-Fokus auf dem Eingabeelement bleibt. |
suggestion-itemSlot (optional)
Beschreibung
Ermöglicht benutzerdefinierte HTML-Definitionen der Vorschlagselemente in einer Liste. Standardmäßig ist <span>{{ displayAttribute(suggestion) }}</span>
Akzeptiert das suggestion und einen query als slot-scope Attributwerte.
<!-- 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 >Benutzerdefinierte Schaltflächen innerhalb von Vorschlagselementen
Wenn Sie den Vorschlagselementen einige Aktionsschaltflächen hinzufügen möchten, verwenden Sie einfach den Direktivenmodifikator .stop um den standardmäßigen suggestion-click zu verhindern:
<!-- 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 >In diesem Fall führen die Schaltflächen NUR die gebundene Methode aus und wählen nicht das vorgeschlagene Element aus.
Manuelle automatische Vervollständigung
Wenn der Vorschlag in der Eingabe automatisch vervollständigt werden muss, anstatt ihn auszuwählen (wie bei mobilen Vorschlägen der Google-Suche), können Sie die Funktion autocomplete() im Bereich des Slots verwenden:
<!-- 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 >oder in den ref-Methoden:
< 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 >Referenzdaten
In Zusammenarbeit mit Ref-Feldern kann dieser Slot verwendet werden, um das Verhalten der Vorschlagsliste drastisch zu verändern.
Eines der einfachsten Beispiele – Hervorhebung des Abfragetextes in den Ergebnissen:
< 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' ) ;
}Ergebnis über die Google Books-Such-API:
Slots
misc-item-aboveundmisc-item-below(optional)
Ermöglichen Sie die Anzeige benutzerdefinierter Elemente in der Vorschlagsliste. Diese Elemente verschwinden nie aus der Liste, sie können weder ausgewählt noch mit der Maus darüber bewegt werden.
Sie können für Dekoration, Lader, Fehlermeldungen usw. verwendet werden.
Diese Slots haben keine Standardeinstellungen und werden daher erst angezeigt, wenn sie definiert wurden.
Akzeptieren Sie das suggestions und einen query als slot-scope Attributwerte.
<!-- 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 >Diese Slots können auch verwendet werden, um leere Ergebnisse zu verarbeiten, wie folgt:
<!-- 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 > Der Dank geht an diese wunderbaren Menschen (Emoji-Taste):
Alexej ? | Karen ? | Simeon Kerkola ? | Roberson Costa ? | Rosdi Kasim | antoinematyja ? | Matthias Martin ? |
Rob Brain ? ? | MrWook ? | Nattam ? | Petr ? | RMFogarty | Brian Monsales | Mila76 ? |
Andriy Löfberg ? | Bruno Monteiro ? | hannesaasamets ? | Jimmy ? | Will Plaehn ? | lauri911 ? | Alex Hyriavets ? |
Behnood Khani ? | Heukranen | shrpne ? ? | Peta Dragos-Andrei ? | Shoito | yamagen0915 ? |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art sind willkommen!
