vue simple suggest
1.11 - Aromatisse
Простой, но многофункциональный компонент автозаполнения для Vue.js
npm install --save vue-simple-suggestДополнительные параметры см. в руководстве по установке.
Это простой, но многофункциональный компонент предложений/автозаполнения для Vue.js.
На самом деле, он настолько многофункциональный, что с ним можно делать сумасшедшие вещи, например
И, как бонус, он очень легкий.
v-model .v-model (выбор/ввод).type , tabindex и т. д.).Все реквизиты, события и слоты являются НЕОБЯЗАТЕЛЬНЫМИ для этого компонента, поэтому его можно использовать вообще без какой-либо настройки.
Если вы чувствуете, что чего-то важного не хватает (или нашли ошибку) — смело создавайте проблему. :)
Чтобы использовать компонент, просто установите его через NPM:
npm install --save vue-simple-suggest
Затем в вашем компоненте/странице Vue.js выполните следующие действия...
Если вам нужно предложить что-то из статического массива:
<!-- 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 >Если вы имеете дело с асинхронными данными с сервера (пример с использованием 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 >Более сложный пример (с использованием поиска в Википедии) см. в исходном коде нашего примера.
npm install --save vue-simple-suggest
# or
yarn add vue-simple-suggestПри включении этим способом - компонент автоматически установится.
<!-- 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' Новое в
v1.8.3
vue-simple-suggest поставляется с минимальным количеством дополнительных полифилов для IE11+ — Object.assign , Element.prototype.closest и Element.prototype.matches . Вы можете импортировать их следующим образом:
import 'vue-simple-suggest/lib/polyfills' ;
// or
require ( 'vue-simple-suggest/lib/polyfills' ) ;Глобально:
// You don't need to do it, if including via <script> (umd, iife)
Vue . component ( 'vue-simple-suggest' , VueSimpleSuggest )В однофайловых компонентах .vue:
< 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 docsНовое в версии 1.2.0
Это сочетания клавиш по умолчанию.
Можно настроить с помощью элементов controls . Все поля в этом объекте controls являются необязательными.
Схема по умолчанию:
| Ключ (код ключа) | Описание |
|---|---|
Escape (27) | Если отображается список предложений – скройте его. Определяется свойством hideList . |
ArrowDown (40) | Если список предложений скрыт — покажите его. Определяется свойством showList . |
ArrowUp (38) / ArrowDown (40) | Циклически (наведите указатель мыши) на предложения. Определяется selectionUp / selectionDown соответственно. |
Enter (13) | Если список отображается – выбирает выделенный элемент. Определяется свойством select . |
(Ctrl/Shift) + Space (32) | Выберите первый элемент в списке. Определяется свойством autocomplete . Работает с клавишей-модификатором Ctrl или клавишей-модификатором Shift . |
(Ctrl/Shift) + Enter (13) | То же, что и предыдущее, но также скрывает список предложений. |
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 >Если есть необходимость настроить внешний вид компонента, вот внутренняя структура классов:
// .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 Если вы хотите использовать существующие классы или такие фреймворки, как Bootstrap, вы можете внедрить свои собственные классы с помощью свойства '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 >Схема:
| Свойство | Описание |
|---|---|
vueSimpleSuggest | Дополнительное имя класса для корневого элемента компонента. |
inputWrapper | Дополнительное имя класса для элемента .input-wrapper . |
defaultInput | Дополнительное имя класса для элемента input , если не указан пользовательский компонент ввода. |
suggestions | Дополнительное имя класса для элемента ul списка предложений. |
miscItemAbove | Имя класса для оболочки слота misc-item-above (сам элемент li ). |
suggestItem | Дополнительное имя класса для элемента li элемента предложения. |
miscItemBelow | Имя класса для оболочки слота misc-item-below (сам элемент li ). |
Новое в версии 1.8.0
Вы также можете определить пользовательские переходы списка, определив правила CSS для перехода с именем vue-simple-suggest в 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 ;
}| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
controls v1.2.0 | Объект | См. элементы управления по умолчанию | Определяет сочетания клавиш в кодах клавиш (в целях совместимости с браузером). Массивы предоставляют возможность назначать несколько клавиш одному действию. Состоит из 5 полей массива: selectionUp , selectionDown , select , hideList и autocomplete ,все из которых являются необязательными. |
max-suggestions | Число | 10 | Максимальное количество предложений для отображения. Установите значение 0 для бесконечных предложений. |
min-length | Число | 1 | Минимальное количество символов во входных данных, чтобы вызвать список предложений. vue-simple-suggest начинает вести себя как раскрывающееся меню, если значение равно 0. |
display-attribute | Нить | 'title' | Свойство объекта предложения для отображения в списке. Поддерживает пунктирные пути. |
value-attribute | Нить | 'id' | Свойство объекта предложения, используемое в качестве уникального ключа. Поддерживает пунктирные пути. |
list | Функция или массив | () => [] | Функция поставщика массива должна принимать запрос в качестве единственного аргумента. Может вернуть массив или обещание. Может быть асинхронным. Без этой функции компонент ведет себя как простой ввод. |
debounce | Число | 0 | Определяет дребезг list (время между событием ввода и выполнением функции). |
destyled | логическое значение | false | Отменить ли стиль ввода и списка предложений по умолчанию. |
styles v1.8.0 | Объект | {} | Классы CSS для присоединения к текущему стилю компонента. |
remove-list | логическое значение | false | Если true — список предложений всегда будет скрыт. |
filter-by-query | логическое значение | false | Фильтровать ли полученные предложения по текстовому запросу ввода (сделать его компонентом поиска). |
filter | Функция | - | Пользовательская функция для фильтрации результатов предложений, которая принимает в качестве двух аргументов один элемент и запрос для фильтрации. Используется только в том случае, если filter-by-query установлено значение true . |
mode v1.4.0 | Нить | 'input' | Событие v-model . Определяет событие, которое запускает v-model . Может быть одним из 'input' ( v-model привязывает отображаемое свойство) или 'select' ( v-model привязывает выбранный элемент). |
type , value , pattern и т. д. | Все входные атрибуты HTML5 с их допустимыми значениями по умолчанию. | ||
nullable-select v1.9.0 | логическое значение | false | Должен ли select принимать null или нет. |
preventHide v1.11.0 | логическое значение | false | Оставлять ли вход открытым или нет, позволяя пользователю выбирать несколько входов |
Новое в версии 1.4.0
Определяет событие, которое запускает v-model . Может быть одним из 'input' (по умолчанию) или 'select' .
Например, если выбран 'input' , то v-модель будет обновлять значение каждый раз, когда запускается событие input , устанавливая строку ввода.
То же самое и с 'select' — v-модель меняется только тогда, когда что-то выбирается из списка, присваивая выбранное значение (строку, объект или что-то еще) его аргументу.
Правильный вариант использования — когда кто-то хочет использовать компонент только для привязки выбора и пользовательского ввода для привязки текста:
< vue-simple-suggest v-model =" selected " mode =" select " >
< input v-model =" text " >
</ vue-simple-suggest > | Имя | Аргументы | Описание |
|---|---|---|
input | Событие ввода HTML | Внешняя проекция события текущего ввода. |
focus | HTML-событие фокуса | Внешняя проекция события текущего ввода. |
blur | HTML-событие фокуса | Внешняя проекция текущего события ввода. |
select | Выбранное предложение | Срабатывает при выборе предложения (щелчком мыши или нажатием клавиши). |
hover | Предложение при наведении, целевой элемент | Срабатывает каждый раз, когда выделяется новое предложение (с помощью перемещения курсора или стрелок клавиатуры). |
suggestion-click | Выбранное предложение, событие клика HTML | Срабатывает при нажатии элемента предложения. |
show-list | - | Срабатывает каждый раз, когда список предложений переключается на отображение. |
hide-list | - | Срабатывает каждый раз, когда список предложений скрывается. |
request-start | Текущее входное значение (запрос) | Срабатывает каждый раз, когда начинается выполнение функции list . |
request-done | Итоговый список предложений | Срабатывает, когда функция list успешно возвращает результат и пересылает его в качестве аргумента. |
request-failed | Прерывающее исключение | Срабатывает, если во время выполнения функции list возникает исключение. |
доступ через
$refs.*your ref name here*
| Имя | Аргументы | Описание |
|---|---|---|
showList | - | Показывает список предложений. Выдает уважаемое событие. |
hideList | - | Скрывает список предложений. Выдает уважаемое событие. |
getSuggestions | query : строка | Получает и обрабатывает предложения из list . Возвращает обещание. Генерирует события requestStart , requestDone и requestFailed . |
research | - | Убран getSuggestions для текущего входного значения. |
clearSuggestions | - | Очищает массив suggestions . |
select | предположение | Выбирает переданное предложение. Выдает уважаемое событие. |
hover | предположение | Нависает над принятым предложением. Выдает уважаемое событие. |
displayProperty | предположение | Возвращает отображаемое свойство предложения. |
valueProperty | предположение | Возвращает свойство value предложения. |
setText v1.9.0 | текст | Надежно устанавливает пользовательский текст в поле ввода. |
autocompleteText v1.10.0 | предположение | Автозаполняет входной текст, используя предложение, переданное в качестве единственного аргумента. |
доступ через
$refs.*your ref name here*
Вы можете использовать их для имитации поведения некоторых компонентов.
| Имя | Аргументы | Описание |
|---|---|---|
onShowList | Вызывается, когда необходимо отобразить список предложений. | |
showSuggestions | Показывает список предложений, при необходимости обновляет данные. | |
onInput | Событие ввода HTML | Вызывается всякий раз, когда изменяется входной текст. Выдает событие input . |
onFocus | HTML-событие фокуса | Вызывается всякий раз, когда ввод попадает в фокус, генерирует событие focus . |
onBlur | HTML-событие фокуса | Антоним к onFocus . |
onAutocomplete | - | Вызывается при нажатии сочетания клавиш автозаполнения. Выбирает первое предложение. |
onListKeyUp | Событие HTML-клавиатуры | Вызывается при нажатии клавиши компонента. Внутренне используется для сокрытия списка. |
onKeyDown | HTML-событие нажатия клавиши | Вызывается при нажатии клавиши компонента. Внутренне используется для отображения списка, обновления предложений и предотвращения отправки формы. |
moveSelection | Вызывается, когда необходимо изменить наведенный элемент. | |
suggestionClick | suggestion , событие клика HTML | Вызывается при любом щелчке предложения. Может использоваться для эмуляции такого щелчка за пределами компонента. |
доступ через
$refs.*your ref name here*
| Имя | По умолчанию | Описание |
|---|---|---|
selected | null | Текущий выбранный элемент. |
hovered | null | Нависший в данный момент элемент. |
suggestions | [] | Текущий список предложений. |
textLength | 0 | Длина текста во входных данных. |
listShown | false | Показан ли список предложений. |
inputElement | null | В настоящее время используется HTMLInputElement. |
canSend | true | Может ли быть выполнена назначенная функция getListFuncion. |
timeoutInstance | null | Тайм-аут до следующего выполнения getListFunction. |
text | $props.value | Текущий вводимый текст. |
slotIsComponent | false | Является ли этот текущий пользовательский ввод компонентом vue. |
listIsRequest | - | Является ли свойство списка функцией. |
input | - | Ссылка на текущий ввод (компонентный или ванильный). |
hoveredIndex | - | Текущий индекс элемента при наведении. |
controlScheme | Элементы управления по умолчанию | Текущая схема управления. |
isPlainSuggestion | false | Состоит ли текущий список предложений из простых строк (а не объектов). |
isClicking | false | true если пользователь в данный момент нажимает. |
isOverList | false | true , если пользователь в данный момент наводит курсор на список предложений. |
isInFocus | false | true если компонент в данный момент находится в фокусе. |
isTabbed | false | true если пользователь нажал клавишу Tab, когда компонент находится в фокусе. |
isSelectedUpToDate | false | true , если пользователь не ввел никаких данных с момента последнего выбора, поэтому выбор все еще актуален. |
слот по умолчанию (необязательно)
Поддерживает вложение. Входные реквизиты можно передать в пользовательский ввод, чтобы избежать их обработки с помощью vue-simple-suggest. По умолчанию используется простой ввод с реквизитами, передаваемыми в vue-simple-suggest.
Предупреждение: v-model для пользовательского ввода НЕ совпадает с v-model для 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 >Предостережения относительно пользовательских компонентов ввода:
Чтобы работать с vue-simple-suggest ваш пользовательский компонент ввода должен следовать определенным стандартным поведениям.
Пользовательский компонент ввода должен (для правильной работы):
input .focus и blur .value предложение.Пользовательский компонент ввода должен (во избежание ограничений использования):
focus и blur . Если vue-simple-suggest с вашим пользовательским компонентом не реагирует на изменения внешних переменных — привяжите v-модель обоих компонентов к одной и той же переменной, например:
< vue-simple-suggest v-model =" model " >
< my-custom-input-somponent v-model =" model " > </ my-custom-input-somponent >
</ vue-simple-suggest > Новое в версии 1.9.0
vue-simple-suggest автоматически вводит 3 необходимых атрибута ARIA для элемента <input> по умолчанию и любого пользовательского ввода, если ваш пользовательский компонент ввода содержит элемент html <input> .
Эти атрибуты гарантируют, что автозаполнение может использоваться пользователями, использующими программы чтения с экрана.
| Имя | Ценить | Описание |
|---|---|---|
| aria-автозаполнение | "list" | Указывает, что функция автозаполнения ввода текста заключается в предложении списка возможных значений во всплывающем окне. |
| aria-контроли | IDREF списка suggestions | IDREF всплывающего элемента, в котором перечислены предлагаемые значения. |
| ария-активный потомок | IDREF наведенной опции | Позволяет вспомогательным технологиям узнать, какой элемент приложение считает приоритетным, в то время как фокус DOM остается на входном элементе. |
слот
suggestion-item(необязательно)
Описание
Позволяет настраивать HTML-определения элементов предложений в списке. По умолчанию: <span>{{ displayAttribute(suggestion) }}</span>
Принимает объект suggestion и текст query в качестве значений атрибута 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 >Пользовательские кнопки внутри элементов предложений
Если вы хотите добавить несколько кнопок действий к элементам предложений, просто используйте модификатор директивы .stop , чтобы предотвратить suggestion-click по умолчанию:
<!-- 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 >В этом случае кнопки будут ТОЛЬКО выполнять связанный метод и не будут выбирать предложенный элемент.
Ручное автозаполнение
Если вам необходимо автозаполнить предложение на входе вместо его выбора (как в мобильных предложениях поиска Google), вы можете использовать функцию autocomplete() в области слота:
<!-- 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 >или в 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 >Исходные данные
В сочетании с полями ссылок этот слот можно использовать для радикального изменения поведения списка предложений.
Один из самых простых примеров — выделение текста запроса в результатах:
< 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' ) ;
}Результат через API поиска Google Книг:
слоты
misc-item-aboveиmisc-item-below(необязательно)
Разрешить отображение пользовательских элементов в списке предложений. Эти элементы никогда не исчезают из списка, их нельзя выбрать или навести на них курсор.
Их можно использовать для оформления, загрузчиков, сообщений об ошибках и т.п.
У этих слотов нет значений по умолчанию, поэтому они не отображаются, пока не определены.
Примите массив suggestions и текст query в качестве значений атрибута 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 >Эти слоты также можно использовать для обработки пустых результатов, например:
<!-- 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 > Спасибо этим замечательным людям (ключ смайлика):
Алексей ? | Карен ? | Симеон Керкола ? | Роберсон Коста ? | Росди Касим | антоинематия ? | Матиас Мартин ? |
Роб Брэйн ? ? | МистерВук ? | наттам ? | Петр ? | Р.М.Фогарти | Брайан Монсалес | Мила76 ? |
Андрей Лёфберг ? | Бруно Монтейру ? | Ханнесаасамец ? | Джимми ? | Уилл Плен ? | lauri911 ? | Алексей Гирявец ? |
Бехнуд Хани ? | Хэй Кранен | шрпне ? ? | Пета Драгош-Андрей ? | шоито | yamagen0915 ? |
Этот проект соответствует спецификации всех участников. Вклад любого рода приветствуется!
