vue simple suggest
1.11 - Aromatisse
Composant de saisie semi-automatique simple mais riche en fonctionnalités pour Vue.js
npm install --save vue-simple-suggestVoir le guide d'installation pour plus d'options.
Il s'agit d'un composant de suggestion/complétion automatique simple mais riche en fonctionnalités pour Vue.js.
En fait, il est tellement riche en fonctionnalités qu'il est possible de faire des choses folles avec, comme
Et en prime, il est très léger.
v-modelv-model (sélection/entrée).type , tabindex et etc...).Tous les accessoires, événements et emplacements sont FACULTATIFS pour ce composant, il peut donc être utilisé sans aucune configuration.
Si vous pensez qu'il manque quelque chose d'important (ou si vous avez trouvé un bug), n'hésitez pas à créer un problème. :)
Pour utiliser le composant, installez-le simplement via NPM :
npm install --save vue-simple-suggest
Ensuite, dans votre composant/page Vue.js, procédez comme suit...
Si vous devez suggérer des éléments à partir d'un tableau statique :
<!-- 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 >Si vous traitez des données asynchrones provenant du serveur (exemple en utilisant 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 >Pour un exemple plus avancé (en utilisant la recherche Wikipédia), consultez notre exemple de source.
npm install --save vue-simple-suggest
# or
yarn add vue-simple-suggestSi vous l'incluez via cette méthode, le composant s'installera automatiquement.
<!-- 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' Nouveau dans
v1.8.3
vue-simple-suggest est livré avec un minimum de polyfills facultatifs pour IE11+ - Object.assign , Element.prototype.closest et Element.prototype.matches . Vous pouvez les importer comme ceci :
import 'vue-simple-suggest/lib/polyfills' ;
// or
require ( 'vue-simple-suggest/lib/polyfills' ) ;Globalement :
// You don't need to do it, if including via <script> (umd, iife)
Vue . component ( 'vue-simple-suggest' , VueSimpleSuggest )Dans les composants .vue à fichier unique :
< 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 docsNouveau dans la v1.2.0
Ce sont des raccourcis clavier par défaut.
Peut être personnalisé avec l'accessoire controls . Tous les champs de cet objet controls sont facultatifs.
Schéma par défaut :
| Clé (code clé) | Description |
|---|---|
Escape (27) | Si la liste de suggestions est affichée, masquez-la. Défini par la propriété hideList . |
ArrowDown (40) | Si la liste de suggestions est masquée, affichez-la. Défini par la propriété showList . |
ArrowUp (38) / ArrowDown (40) | Parcourez (survolez) les suggestions. Défini respectueusement par les propriétés selectionUp / selectionDown . |
Enter (13) | Si la liste est affichée, choisit l'élément en surbrillance. Défini par la propriété select . |
(Ctrl/Shift) + Space (32) | Sélectionnez le premier élément de la liste. Défini par la propriété autocomplete . Fonctionne avec la touche de modification Ctrl ou la touche de modification Shift . |
(Ctrl/Shift) + Enter (13) | Identique au précédent, mais masque également la liste des suggestions. |
Objet JS :
{
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 >S'il est nécessaire de personnaliser l'apparence du composant, voici la structure de classe interne :
// .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 Si vous souhaitez utiliser vos classes existantes ou des frameworks comme Bootstrap, vous pouvez injecter vos propres classes à l'aide de l'accessoire 'styles' :
<!-- 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 >Schème:
| Propriété | Description |
|---|---|
vueSimpleSuggest | Nom de classe supplémentaire pour l'élément racine du composant. |
inputWrapper | Nom de classe supplémentaire pour l’élément .input-wrapper . |
defaultInput | Nom de classe supplémentaire pour l’élément input si aucun composant d’entrée personnalisé n’est fourni. |
suggestions | Nom de classe supplémentaire pour l’élément ul de la liste de suggestions. |
miscItemAbove | Nom de classe pour le wrapper de slot misc-item-above (élément li lui-même). |
suggestItem | Nom de classe supplémentaire pour l’élément li de l’élément de suggestion. |
miscItemBelow | Nom de classe pour le wrapper de slot misc-item-below (élément li lui-même). |
Nouveau dans la v1.8.0
Vous pouvez également définir des transitions de liste personnalisées en définissant des règles CSS pour la transition nommée vue-simple-suggest sur le div .suggestions :
. 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 ;
}| Nom | Taper | Défaut | Description |
|---|---|---|---|
controls v1.2.0 | Objet | Voir les contrôles par défaut | Détermine les raccourcis clavier dans les codes clés (à des fins de compatibilité avec le navigateur). Les tableaux offrent la possibilité d'attribuer plusieurs touches à une seule action. Se compose de 5 champs de tableau : selectionUp , selectionDown , select , hideList et autocomplete , qui sont tous facultatifs. |
max-suggestions | Nombre | 10 | Le nombre maximum de suggestions à afficher. Réglez sur 0 pour des suggestions infinies. |
min-length | Nombre | 1 | Le nombre minimum de symboles en entrée pour déclencher la liste de suggestions. vue-simple-suggest commence à se comporter comme un menu déroulant, si la valeur est 0. |
display-attribute | Chaîne | 'title' | Propriété d'un objet de suggestion à afficher dans une liste. Prend en charge les chemins en pointillés. |
value-attribute | Chaîne | 'id' | Propriété d'un objet de suggestion à utiliser comme clé unique. Prend en charge les chemins en pointillés. |
list | Fonction ou tableau | () => [] | La fonction fournisseur de tableau doit accepter une requête comme seul argument. Peut renvoyer un tableau ou une promesse. Peut être asynchrone. Le composant se comporte comme une simple entrée sans cette fonction. |
debounce | Nombre | 0 | Détermine le rebond list (un temps entre l'événement d'entrée et l'exécution d'une fonction). |
destyled | Booléen | false | S'il faut annuler le style par défaut de la liste d'entrées et de suggestions. |
styles v1.8.0 | Objet | {} | Classes CSS à attacher avec le style de composant actuel. |
remove-list | Booléen | false | Si c'est vrai, la liste de suggestions sera toujours masquée. |
filter-by-query | Booléen | false | S'il faut filtrer les suggestions résultantes par la requête de texte d'entrée (en faire un composant de recherche). |
filter | Fonction | - | Une fonction personnalisée pour filtrer les résultats des suggestions qui accepte un seul élément et une requête à filtrer comme ses 2 arguments. Utilisé uniquement si filter-by-query est défini sur true . |
mode v1.4.0 | Chaîne | 'input' | L'événement v-model . Détermine l'événement qui déclenche v-model . Il peut s'agir de 'input' ( v-model lie une propriété affichée) ou 'select' ( v-model lie un élément sélectionné). |
type , value , pattern , etc... | Tous les attributs d'entrée HTML5 avec leurs valeurs par défaut respectées. | ||
nullable-select v1.9.0 | Booléen | false | Si la select doit accepter null ou non. |
preventHide v1.11.0 | Booléen | false | S'il faut garder l'entrée ouverte ou non, permettant à l'utilisateur de sélectionner plusieurs entrées |
Nouveau dans la v1.4.0
Détermine l'événement qui déclenche v-model . Peut être l'un des 'input' (par défaut) ou 'select' .
Par exemple, si 'input' est choisi, alors v-model mettra à jour la valeur à chaque fois qu'un événement input est déclenché, définissant la chaîne de l'entrée.
Il en va de même pour 'select' - le v-model ne change que lorsque quelque chose est sélectionné dans la liste, définissant la valeur sélectionnée (chaîne, objet ou autre) sur son argument.
Un cas d'utilisation approprié est celui où l'on souhaite utiliser le composant uniquement pour la liaison de sélection et la saisie personnalisée pour la liaison de texte :
< vue-simple-suggest v-model =" selected " mode =" select " >
< input v-model =" text " >
</ vue-simple-suggest > | Nom | Arguments | Description |
|---|---|---|
input | Événement d'entrée HTML | Une projection vers l'extérieur de l'événement de l'entrée actuelle. |
focus | Événement de focus HTML | Une projection vers l'extérieur de l'événement de l'entrée actuelle. |
blur | Événement de focus HTML | Une projection vers l'extérieur de l'événement de l'entrée actuelle. |
select | Suggestion sélectionnée | Se déclenche lors de la sélection de suggestions (via un clic de souris ou une pression sur une touche). |
hover | Suggestion survolée, élément cible | Se déclenche chaque fois qu'une nouvelle suggestion est mise en surbrillance (via un mouvement du curseur ou des flèches du clavier). |
suggestion-click | Suggestion sélectionnée, événement de clic HTML | Se déclenche sur le clic de l'élément de suggestion. |
show-list | - | Se déclenche chaque fois que la liste de suggestions est basculée pour être affichée. |
hide-list | - | Se déclenche chaque fois que la liste de suggestions est masquée. |
request-start | Valeur d'entrée actuelle (requête) | Se déclenche chaque fois qu'une fonction list commence à s'exécuter. |
request-done | Liste de suggestions résultante | Se déclenche lorsqu'une fonction list renvoie avec succès un résultat et transmet ce résultat en tant qu'argument. |
request-failed | L'exception d'interruption | Se déclenche si une exception se produit lors de l'exécution d'une fonction list . |
accessible via
$refs.*your ref name here*
| Nom | Arguments | Description |
|---|---|---|
showList | - | Affiche la liste de suggestions. Émet l'événement respecté. |
hideList | - | Masque la liste de suggestions. Émet l'événement respecté. |
getSuggestions | query : chaîne | Obtient et traite les suggestions de la prop list . Renvoie une promesse. Émet les événements requestStart , requestDone et requestFailed . |
research | - | getSuggestions anti-rebond sur la valeur d'entrée actuelle. |
clearSuggestions | - | Efface le tableau suggestions . |
select | suggestion | Sélectionne la suggestion réussie. Émet l'événement respecté. |
hover | suggestion | Survole la suggestion passée. Émet l'événement respecté. |
displayProperty | suggestion | Renvoie la propriété affichée d'une suggestion. |
valueProperty | suggestion | Renvoie la propriété value d'une suggestion. |
setText v1.9.0 | texte | Définit de manière fiable le texte personnalisé dans le champ de saisie. |
autocompleteText v1.10.0 | suggestion | Complète automatiquement le texte saisi en utilisant la suggestion passée comme seul argument. |
accessible via
$refs.*your ref name here*
Vous pouvez les utiliser pour imiter certains comportements du composant.
| Nom | Arguments | Description |
|---|---|---|
onShowList | Invoqué lorsqu'une liste de suggestions doit être affichée. | |
showSuggestions | Affiche la liste de suggestions, actualise les données si nécessaire. | |
onInput | Événement d'entrée HTML | Invoqué chaque fois que le texte saisi est modifié. Émet l’événement input . |
onFocus | Événement de focus HTML | Invoqué chaque fois que l'entrée est mise au point, émet l'événement focus . |
onBlur | Événement de focus HTML | Antonyme de onFocus . |
onAutocomplete | - | Invoqué lorsque le raccourci clavier de saisie semi-automatique est enfoncé. Sélectionne la première suggestion. |
onListKeyUp | Événement de saisie HTML | Invoqué lors de la saisie du composant. Utilisé en interne pour masquer la liste. |
onKeyDown | Événement HTML keydown | Invoqué lors de la frappe du composant. Utilisé en interne pour afficher la liste, mettre à jour les suggestions et empêcher l'envoi de formulaires. |
moveSelection | Invoqué lorsque l'élément survolé doit être modifié. | |
suggestionClick | suggestion , événement de clic HTML | Invoqué lors de tout clic de suggestion. Peut être utilisé pour émuler un tel clic depuis l’extérieur du composant. |
accessible via
$refs.*your ref name here*
| Nom | Défaut | Description |
|---|---|---|
selected | null | Élément actuellement sélectionné. |
hovered | null | Élément actuellement survolé. |
suggestions | [] | Liste de suggestions actuelles. |
textLength | 0 | Longueur du texte dans l'entrée. |
listShown | false | La liste de suggestions est-elle affichée. |
inputElement | null | HTMLInputElement actuellement utilisé. |
canSend | true | Si le getListFuncion attribué peut être exécuté. |
timeoutInstance | null | Le délai d'attente jusqu'à la prochaine exécution de getListFunction. |
text | $props.value | Texte d'entrée actuel. |
slotIsComponent | false | Si cette entrée personnalisée actuelle est un composant vue. |
listIsRequest | - | Si l'accessoire de liste est une fonction. |
input | - | Une référence à l'entrée actuelle (composant ou vanille). |
hoveredIndex | - | L’index actuel de l’élément survolé. |
controlScheme | Contrôles par défaut | Le système de contrôle actuel. |
isPlainSuggestion | false | Indique si la liste de suggestions actuelle est constituée de chaînes simples (et non d'objets). |
isClicking | false | true si l'utilisateur clique actuellement. |
isOverList | false | true si l'utilisateur survole actuellement la liste des suggestions. |
isInFocus | false | true si le composant est actuellement actif. |
isTabbed | false | true si l'utilisateur a appuyé sur la tabulation alors que le composant est actif. |
isSelectedUpToDate | false | true si l'utilisateur n'a effectué aucune saisie depuis la dernière sélection, la sélection est donc toujours pertinente. |
emplacement par défaut (facultatif)
Prend en charge la nidification. Les accessoires d'entrée peuvent être transmis à une entrée personnalisée pour éviter leur traitement par vue-simple-suggest. La valeur par défaut est une entrée simple avec des accessoires passés à vue-simple-suggest.
Attention : v-model sur une entrée personnalisée N'EST PAS le même que v-model sur 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 >Mises en garde concernant les composants d'entrée personnalisés :
Pour travailler avec vue-simple-suggest votre composant d'entrée personnalisé doit suivre certains comportements standard.
Le composant de saisie personnalisé doit (pour fonctionner correctement) :
input .focus et blur .value .Le composant d'entrée personnalisé devrait (afin d'éviter les limitations d'utilisation) :
focus et blur . Si vue-simple-suggest avec votre composant personnalisé ne semble pas réagir aux changements de variables externes, liez le modèle v des deux composants à la même variable, comme ceci :
< vue-simple-suggest v-model =" model " >
< my-custom-input-somponent v-model =" model " > </ my-custom-input-somponent >
</ vue-simple-suggest > Nouveau dans la v1.9.0
vue-simple-suggest injecte automatiquement 3 attributs ARIA nécessaires pour l'élément <input> par défaut et toute entrée personnalisée, tant que votre composant d'entrée personnalisé contient un élément html <input> .
Ces attributs garantissent que la saisie semi-automatique peut être utilisée par les utilisateurs qui utilisent des lecteurs d'écran.
| Nom | Valeur | Description |
|---|---|---|
| aria-autocomplete | "list" | Indique que le comportement de saisie semi-automatique de la saisie de texte consiste à suggérer une liste de valeurs possibles dans une fenêtre contextuelle. |
| contrôles aria | IDREF de la liste de suggestions | IDREF de l'élément contextuel qui répertorie les valeurs suggérées. |
| aria-activedescendant | IDREF de l'option survolée | Permet aux technologies d'assistance de savoir quel élément l'application considère comme ciblé tandis que le focus DOM reste sur l'élément d'entrée. |
emplacement
suggestion-item(facultatif)
Description
Permet des définitions HTML personnalisées des éléments de suggestion dans une liste. La valeur par défaut est <span>{{ displayAttribute(suggestion) }}</span>
Accepte l'objet suggestion et un texte query comme valeurs d'attribut slot-scope .
<!-- 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 >Boutons personnalisés à l'intérieur des éléments de suggestion
Si vous souhaitez ajouter des boutons d'action aux éléments de suggestion, utilisez simplement le modificateur de directive .stop pour empêcher le suggestion-click par défaut :
<!-- 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 >Dans ce cas, les boutons exécuteront UNIQUEMENT la méthode liée et ne sélectionneront pas l'élément suggéré.
Saisie semi-automatique manuelle
S'il est nécessaire de compléter automatiquement la suggestion dans l'entrée au lieu de la sélectionner (comme dans les suggestions mobiles de la recherche Google), vous pouvez utiliser la fonction autocomplete() dans le champ d'application de l'emplacement :
<!-- 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 >ou dans les méthodes de référence :
< 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 >Données de référence
En coopération avec les champs ref, cet emplacement peut être utilisé pour transformer radicalement le comportement de la liste de suggestions.
L'un des exemples les plus simples est la mise en évidence du texte de la requête dans les résultats :
< 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' ) ;
}Résultat via l'API de recherche Google Livres :
Emplacements
misc-item-aboveetmisc-item-below(facultatif)
Autoriser l'affichage des éléments personnalisés dans la liste de suggestions. Ces éléments ne disparaissent jamais de la liste, ils ne peuvent pas non plus être sélectionnés ni survolés.
Ils peuvent être utilisés pour la décoration, les chargeurs, les messages d'erreur, etc.
Ces emplacements n'ont pas de valeurs par défaut, ils ne sont donc pas affichés tant qu'ils n'ont pas été définis.
Acceptez le tableau suggestions et un texte query comme valeurs d'attribut slot-scope .
<!-- 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 >Ces emplacements peuvent également être utilisés pour gérer des résultats vides, comme ceci :
<!-- 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 > Merci à ces personnes merveilleuses (clé emoji) :
Alexeï ? | Karen ? | Siméon Kerkola ? | Roberson-Costa ? | Rosdi Kasim | antoinematyja ? | Mathias Martin ? |
Rob Cerveau ? ? | Monsieur Wook ? | Nattam ? | Pierre ? | RMFogarty | Brian Monsales | Mila76 ? |
Andreï Löfberg ? | Bruno Monteiro ? | hannesaasamets ? | Jimmy ? | Will Plaehn ? | lauri911 ? | Alex Hyriavets ? |
Behnood Khani ? | Hay Kranen | shrpné ? ? | Peta Dragos-Andrei ? | shoïto | yamagen0915 ? |
Ce projet suit la spécification de tous les contributeurs. Les contributions de toute nature sont les bienvenues !
