vue simple suggest
1.11 - Aromatisse
Componente de preenchimento automático simples, mas rico em recursos para Vue.js
npm install --save vue-simple-suggestConsulte o guia de instalação para mais opções.
Este é um componente de sugestão/preenchimento automático simples, mas rico em recursos para Vue.js.
Na verdade, é tão rico em recursos que é possível fazer coisas malucas com ele, como
E, como bônus, é muito leve.
v-model .v-model (seleção/entrada).type , tabindex e etc...).Todos os adereços, eventos e slots são OPCIONAIS para este componente, portanto ele pode ser usado sem qualquer configuração.
Se você acha que algo importante está faltando (ou encontrou um bug), sinta-se à vontade para criar um problema. :)
Para utilizar o componente basta instalar via NPM:
npm install --save vue-simple-suggest
Então, em seu componente/página Vue.js, faça o seguinte ...
Se você precisar sugerir coisas de um array estático:
<!-- 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 >Se você estiver lidando com dados assíncronos do servidor (exemplo usando 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 >Para um exemplo mais avançado (usando a pesquisa na Wikipedia), consulte nossa fonte de exemplo.
npm install --save vue-simple-suggest
# or
yarn add vue-simple-suggestSe incluir através deste método - o componente será instalado automaticamente.
<!-- 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' Novo na
v1.8.3
vue-simple-suggest vem com polyfills opcionais mínimos para IE11+ - Object.assign , Element.prototype.closest e Element.prototype.matches . Você pode importá-los assim:
import 'vue-simple-suggest/lib/polyfills' ;
// or
require ( 'vue-simple-suggest/lib/polyfills' ) ;Globalmente:
// You don't need to do it, if including via <script> (umd, iife)
Vue . component ( 'vue-simple-suggest' , VueSimpleSuggest )Em componentes .vue de arquivo único:
< 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 docsNovo na v1.2.0
Estes são atalhos de teclado padrão.
Pode ser personalizado com o suporte controls . Todos os campos neste objeto controls são opcionais.
Esquema padrão:
| Chave (código chave) | Descrição |
|---|---|
Escape (27) | Se a lista de sugestões for exibida, oculte-a. Definido pela propriedade hideList . |
ArrowDown (40) | Se a lista de sugestões estiver oculta, mostre-a. Definido pela propriedade showList . |
ArrowUp (38) / ArrowDown (40) | Percorra (passe o mouse) pelas sugestões. Definido pelas propriedades selectionUp / selectionDown respeitosamente. |
Enter (13) | Se a lista for mostrada - escolhe o elemento destacado. Definido pela propriedade select . |
(Ctrl/Shift) + Space (32) | Selecione o primeiro elemento da lista. Definido pela propriedade autocomplete . Funciona com a tecla modificadora Ctrl ou a tecla modificadora Shift . |
(Ctrl/Shift) + Enter (13) | Igual ao anterior, mas também oculta a lista de sugestões. |
Objeto 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 >Se houver necessidade de customizar a aparência do componente, aqui está a estrutura interna de classes:
// .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 Se você deseja usar suas classes existentes ou estruturas como Bootstrap, você pode injetar suas próprias classes usando a propriedade '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 >Esquema:
| Propriedade | Descrição |
|---|---|
vueSimpleSuggest | Nome de classe adicional para o elemento raiz do componente. |
inputWrapper | Nome de classe adicional para o elemento .input-wrapper . |
defaultInput | Nome de classe adicional para o elemento input se nenhum componente de entrada personalizado for fornecido. |
suggestions | Nome de classe adicional para o elemento ul da lista de sugestões. |
miscItemAbove | Nome de classe para o wrapper de slot misc-item-above (o próprio elemento li ). |
suggestItem | Nome de classe adicional para o elemento li do item de sugestão. |
miscItemBelow | Nome da classe para o wrapper de slot misc-item-below (o próprio elemento li ). |
Novo na v1.8.0
Você também pode definir transições de lista personalizadas definindo regras CSS para a transição chamada vue-simple-suggest na 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 ;
}| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
controls v1.2.0 | Objeto | Veja os controles padrão | Determina os atalhos de teclado em códigos-chave (para fins de compatibilidade do navegador). Matrizes fornecem a capacidade de atribuir várias chaves a uma ação. Consiste em 5 campos de array: selectionUp , selectionDown , select , hideList e autocomplete , todos opcionais. |
max-suggestions | Número | 10 | A quantidade máxima de sugestões a serem exibidas. Defina como 0 para sugestões infinitas. |
min-length | Número | 1 | A quantidade mínima de símbolos na entrada para acionar a lista de sugestões. vue-simple-suggest começa a se comportar como um menu suspenso, se o valor for 0. |
display-attribute | Corda | 'title' | A propriedade em um objeto de sugestão a ser exibido em uma lista. Suporta caminhos pontilhados. |
value-attribute | Corda | 'id' | A propriedade em um objeto de sugestão a ser usado como chave exclusiva. Suporta caminhos pontilhados. |
list | Função ou Matriz | () => [] | A função provedora de array deve aceitar uma consulta como seu único argumento. Pode retornar um array ou uma promessa. Pode ser assíncrono. O componente se comporta como uma entrada simples sem esta função. |
debounce | Número | 0 | Determina o debounce list (um tempo entre o evento de entrada e a execução de uma função). |
destyled | Booleano | false | Se deseja cancelar o estilo padrão da lista de entradas e sugestões. |
styles v1.8.0 | Objeto | {} | Classes CSS a serem anexadas ao estilo do componente atual. |
remove-list | Booleano | false | Se for verdade - a lista de sugestões estará sempre oculta. |
filter-by-query | Booleano | false | Se deseja filtrar as sugestões resultantes pela consulta de texto de entrada (torná-la um componente de pesquisa). |
filter | Função | - | Uma função personalizada para filtrar os resultados da sugestão que aceita um único item e uma consulta para filtrar como seus 2 argumentos. Usado somente se filter-by-query estiver definido como true . |
mode v1.4.0 | Corda | 'input' | O evento v-model . Determina o evento que aciona v-model . Pode ser 'input' ( v-model vincula uma propriedade exibida) ou 'select' ( v-model vincula um item selecionado). |
type , value , pattern , etc... | Todos os atributos de entrada HTML5 com seus valores padrão respeitados. | ||
nullable-select v1.9.0 | Booleano | false | Se a select deve aceitar null ou não. |
preventHide v1.11.0 | Booleano | false | Manter a entrada aberta ou não, permitindo ao usuário selecionar múltiplas entradas |
Novo na v1.4.0
Determina o evento que aciona v-model . Pode ser 'input' (padrão) ou 'select' .
Por exemplo, se 'input' for escolhido - então o v-model atualizará o valor cada vez que um evento input for disparado, definindo a string da entrada.
O mesmo vale para 'select' - o modelo v muda apenas quando algo é selecionado na lista, definindo o valor selecionado (string, objeto ou qualquer outro) para seu argumento.
Um caso de uso adequado é quando se deseja usar o componente apenas para vinculação de seleção e entrada personalizada para vinculação de texto:
< vue-simple-suggest v-model =" selected " mode =" select " >
< input v-model =" text " >
</ vue-simple-suggest > | Nome | Argumentos | Descrição |
|---|---|---|
input | Evento de entrada HTML | Uma projeção externa do evento da entrada atual. |
focus | Evento de foco HTML | Uma projeção externa do evento da entrada atual. |
blur | Evento de foco HTML | Uma projeção externa do evento da entrada atual. |
select | Sugestão selecionada | Dispara na seleção de sugestões (através de um clique do mouse ou pressionando a tecla Enter). |
hover | Sugestão suspensa, elemento de destino | Dispara sempre que uma nova sugestão é destacada (através do movimento do cursor ou das setas do teclado). |
suggestion-click | Sugestão selecionada, evento de clique em HTML | Dispara no clique do elemento de sugestão. |
show-list | - | Dispara sempre que a lista de sugestões é alternada para ser mostrada. |
hide-list | - | Dispara sempre que a lista de sugestões está sendo ocultada. |
request-start | Valor de entrada atual (consulta) | Dispara sempre que uma função list começa a ser executada. |
request-done | Lista de sugestões resultantes | Dispara quando uma função list retorna com sucesso um resultado e encaminha esse resultado como um argumento. |
request-failed | A exceção interrompidora | Dispara se ocorrer uma exceção durante a execução de uma função list . |
acessado via
$refs.*your ref name here*
| Nome | Argumentos | Descrição |
|---|---|---|
showList | - | Mostra a lista de sugestões. Emite o evento respeitado. |
hideList | - | Oculta a lista de sugestões. Emite o evento respeitado. |
getSuggestions | query : string | Obtém e processa sugestões da propriedade list . Retorna uma promessa. Emite os eventos requestStart , requestDone e requestFailed . |
research | - | getSuggestions rejeitados no valor de entrada atual. |
clearSuggestions | - | Limpa a matriz de suggestions . |
select | sugestão | Seleciona a sugestão aprovada. Emite o evento respeitado. |
hover | sugestão | Passa o mouse sobre a sugestão passada. Emite o evento respeitado. |
displayProperty | sugestão | Retorna a propriedade exibida de uma sugestão. |
valueProperty | sugestão | Retorna a propriedade value de uma sugestão. |
setText v1.9.0 | texto | Define de forma confiável o texto personalizado para o campo de entrada. |
autocompleteText v1.10.0 | sugestão | Completa automaticamente o texto de entrada usando a sugestão passada como único argumento. |
acessado via
$refs.*your ref name here*
Você pode usá-los para imitar alguns dos comportamentos do componente.
| Nome | Argumentos | Descrição |
|---|---|---|
onShowList | Invocado quando uma lista de sugestões precisa ser mostrada. | |
showSuggestions | Mostra a lista de sugestões e atualiza os dados, se necessário. | |
onInput | Evento de entrada HTML | Invocado sempre que o texto de entrada é alterado. Emite o evento input . |
onFocus | Evento de foco HTML | Invocado sempre que a entrada entra em foco, emite o evento focus . |
onBlur | Evento de foco HTML | Antônimo de onFocus . |
onAutocomplete | - | Invocado quando o atalho de teclado de preenchimento automático é pressionado. Seleciona a primeira sugestão. |
onListKeyUp | Evento de chaveamento HTML | Invocado no componente keyup. Usado internamente para ocultar a lista. |
onKeyDown | Evento de pressionamento de tecla HTML | Invocado no keydown do componente. Utilizado internamente para mostrar a lista, atualizar sugestões e impedir o envio de formulários. |
moveSelection | Invocado quando o elemento pairado precisa ser alterado. | |
suggestionClick | suggestion , evento de clique em HTML | Invocado em qualquer clique de sugestão. Pode ser usado para emular esse clique de fora do componente. |
acessado via
$refs.*your ref name here*
| Nome | Padrão | Descrição |
|---|---|---|
selected | null | Elemento atualmente selecionado. |
hovered | null | Elemento atualmente pairado. |
suggestions | [] | Lista de sugestões atuais. |
textLength | 0 | Comprimento do texto na entrada. |
listShown | false | A lista de sugestões é mostrada. |
inputElement | null | HTMLInputElement usado atualmente. |
canSend | true | Se o getListFuncion atribuído pode ser executado. |
timeoutInstance | null | O tempo limite até a próxima execução de getListFunction. |
text | $props.value | Texto de entrada atual. |
slotIsComponent | false | Se esta entrada personalizada atual é um componente vue. |
listIsRequest | - | Se a propriedade list é uma função. |
input | - | Uma referência à entrada atual (componente ou vanilla). |
hoveredIndex | - | O índice do elemento atual pairado. |
controlScheme | Controles padrão | O atual esquema de controles. |
isPlainSuggestion | false | Se a lista de sugestões atual consiste em strings simples (não em objetos). |
isClicking | false | true se o usuário clicar atualmente. |
isOverList | false | true se o usuário passar o mouse sobre a lista de sugestões. |
isInFocus | false | true se o componente estiver atualmente em foco. |
isTabbed | false | true se o usuário pressionou tab, enquanto o componente está em foco. |
isSelectedUpToDate | false | true se o usuário não tiver feito nenhuma entrada desde a última seleção, portanto a seleção ainda é relevante. |
slot padrão (opcional)
Suporta aninhamento. Os adereços de entrada podem ser passados para uma entrada personalizada para evitar seu processamento por vue-simple-suggest. O padrão é uma entrada simples com adereços passados para vue-simple-suggest.
Aviso: v-model em uma entrada personalizada NÃO É o mesmo que v-model em 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 >Advertências sobre componentes de entrada personalizados:
Para trabalhar com vue-simple-suggest seu componente de entrada personalizado deve seguir certos comportamentos padrão.
O componente de entrada personalizado deve (para funcionar corretamente):
input .focus e blur .value .O componente de entrada personalizado deve (para evitar limitações de uso):
focus e blur . Se vue-simple-suggest com seu componente personalizado não parece reagir a alterações externas de variáveis - vincule o modelo v de ambos os componentes à mesma variável, da seguinte forma:
< vue-simple-suggest v-model =" model " >
< my-custom-input-somponent v-model =" model " > </ my-custom-input-somponent >
</ vue-simple-suggest > Novo na v1.9.0
vue-simple-suggest injeta automaticamente 3 atributos ARIA necessários para o elemento <input> padrão e qualquer entrada personalizada, desde que seu componente de entrada personalizado contenha um elemento html <input> .
Esses atributos garantem que o preenchimento automático possa ser usado por usuários que dependem de leitores de tela.
| Nome | Valor | Descrição |
|---|---|---|
| aria-autocomplete | "list" | Indica que o comportamento de preenchimento automático da entrada de texto é sugerir uma lista de valores possíveis em um pop-up. |
| controles de ária | IDREF da lista de suggestions | IDREF do elemento pop-up que lista os valores sugeridos. |
| aria-activedescendente | IDREF da opção pairada | Permite que tecnologias assistivas saibam qual elemento o aplicativo considera como focado enquanto o foco do DOM permanece no elemento de entrada. |
slot
suggestion-item(opcional)
Descrição
Permite definições HTML personalizadas dos itens de sugestão em uma lista. O padrão é <span>{{ displayAttribute(suggestion) }}</span>
Aceita o objeto suggestion e um texto query como valores de atributo de 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 >Botões personalizados dentro dos itens de sugestão
Se você quiser adicionar alguns botões de ação aos itens de sugestão, basta usar o modificador de diretiva .stop para evitar o suggestion-click padrão:
<!-- 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 >Neste caso, os botões executarão SOMENTE o método vinculado e não selecionarão o item sugerido.
Preenchimento automático manual
Se houver necessidade de preencher automaticamente a sugestão na entrada em vez de selecioná-la (como nas sugestões móveis da pesquisa do Google), você pode usar a função autocomplete() no escopo do slot:
<!-- 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 nos métodos ref:
< 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 >Dados de referência
Em cooperação com os campos de referência, este slot pode ser usado para transformar drasticamente o comportamento da lista de sugestões.
Um dos exemplos mais simples é destacar o texto da consulta nos resultados:
< 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' ) ;
}Resultado por meio da API de pesquisa do Google Livros:
slots
misc-item-aboveemisc-item-below(opcional)
Permitir que elementos personalizados sejam mostrados na lista de sugestões. Esses elementos nunca desaparecem da lista, nem podem ser selecionados nem pairados sobre eles.
Eles podem ser usados para decoração, carregadores, mensagens de erro e etc.
Esses slots não possuem padrões, portanto não são mostrados até serem definidos.
Aceite a matriz suggestions e um texto query como valores de atributo de 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 >Esses slots também podem ser usados para lidar com resultados vazios, como este:
<!-- 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 > Os agradecimentos vão para essas pessoas maravilhosas (chave emoji):
Alexei ? | Karen ? | Simeon Kerkola ? | Robertson Costa ? | Rosdi Kasim | antoinematyja ? | Matias Martins ? |
Rob Cérebro ? ? | Senhor Wook ? | nattam ? | Pedro ? | RMFogarty | Brian Monsales | Mila76 ? |
Andriy Löfberg ? | Bruno Monteiro ? | Hannesaasamets ? | Jimmy ? | Will Plaehn ? | lauri911 ? | Alex Hyriavets ? |
Behnood Khani ? | Hay Kranen | estilhaço ? ? | Peta Dragos-Andrei ? | Shoito | yamagen0915 ? |
Este projeto segue a especificação de todos os contribuidores. Contribuições de qualquer tipo são bem-vindas!
