组件用.vue还是.js_Vue.js的简单但功能丰富的自动完成组件

组件用.vue还是.js

提示简单建议 (vue-simple-suggest)

Simple yet feature-rich autocomplete component for Vue.js.

Vue.js的简单但功能丰富的自动完成组件。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install --save vue-simple-suggest

它是什么 (What is it)

This is a simple yet feature-rich suggestion/autocomplete component for Vue.js.

这是Vue.js的一个简单但功能丰富的建议/自动完成组件。

Actually, it's so feature rich, that it's possible to do crazy stuff with it, like

实际上，它的功能如此丰富，以至于可以用它来做疯狂的事情，例如

• Imitating drop-downs and drop-down menus

  模拟下拉菜单和下拉菜单

• Turn suggestions list into an actual suggestions table

  将建议列表转换为实际的建议表

• Work with ANY type of custom input passed (like type=button, radio and etc.)

  处理传递的任何类型的自定义输入(例如type = button，radio等)

• ... And many more things

  ...还有更多事情

And, as a bonus, it is very light.

而且，作为奖励，它非常轻巧。

特征 (Features)

• v-model support.

  v-model支持。

• Switching v-model type (select/input).

  切换v-model类型(选择/输入)。

• Custom input element through default slot.

  通过默认插槽的自定义输入元素。

• Custom list items through named scoped slots.

  通过命名作用域插槽的自定义列表项。

• All HTML5-valid props for default input element are provided (type, tabindex and etc...).

  提供所有用于默认输入元素HTML5有效道具( type ， tabindex等)。

• Customizable keyboard controls.

  可自定义的键盘控件。

• Rich and simple API.

  丰富而简单的API。

• CSS classes for quick and easy restyling.

  CSS类，可快速轻松地重新样式化。

• Many build variants to choose from.

  许多构建变体可供选择。

• Flexible and customizable component design.

  灵活和可定制的组件设计。

All of the props, events and slots are OPTIONAL for this component, so it can be used without any configuration at all.

对于该组件，所有道具，事件和插槽都是可选的，因此完全无需任何配置即可使用它。

新功能？ (New features?)

If you feel that something important is missing (or found a bug) - feel free to create an issue. :)

如果您觉得缺少重要的东西(或发现了错误)，请随时提出问题 。 :)

---

---

简单的例子 (Simple example)

To use the component just install via NPM:

要使用该组件，只需通过NPM安装：

npm install --save vue-simple-suggest

npm install --save vue-simple-suggest

Then, in your Vue.js component/page:

然后，在您的Vue.js组件/页面中：

<!-- Some component.vue -->
<template>
  <vue-suggest
    v-model="chosen"
    :list="simpleSuggestionList"
    :filter-by-query="true">
<!-- Filter by input text to only show the matching results -->
  </vue-suggest>

  <br>

  <p>Chosen element: {{ chosen }}</p>
</template>

<script>
  import VueSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components: {
      VueSuggest
    },
    data() {
      return {
        chosen: ''
      }
    },
    methods: {
      simpleSuggestionList() {
        return [
          'Vue.js',
          'React.js',
          'Angular.js'
        ]
      }
    }
  }
</script>

---

---

安装 (Installation)

NPM (NPM)

npm install --save vue-simple-suggest
# or
yarn add vue-simple-suggest

取消包装 (Unpkg)

If including via this method - the component will automatically install itself.

如果通过此方法包含-组件将自动安装自身。

<!-- 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>

输入 (Importing)

/// 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, Object.assign 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'

用法 (Usage)

Globaly:

全局性：

// You don't need to do it, if including via <script> (umd, iife)
Vue.component('vue-simple-suggest', VueSimpleSuggest)

In single-file .vue components:

在单文件.vue组件中：

<script>
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Using a css-loader

  export default {
    components: {
      VueSimpleSuggest
    }
  }
</script>

---

---

构建设置 (Build Setup)

# 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

---

---

默认控件 (Default Controls)

New in v1.2.0

v1.2.0的新功能

These are default keyboard shortcuts.

这些是默认的键盘快捷键。

Can be customized with the controls prop. All fields in this controls object are optional.

可以使用controls道具进行自定义。 此controls对象中的所有字段都是可选的。

Default scheme:

默认方案：

Key (key code)	Description
Escape (27)	If the suggestions list is shown - hide it. Defined by hideList property.
ArrowDown (40)	If the suggestions list is hidden - show it. Defined by selectionDown property.
ArrowUp (38) / ArrowDown (40)	Cycle (hover) through suggestions. Defined by selectionUp/selectionDown properties respectfully.
Enter (13)	If the list is shown - chooses the highlighted element, if the list is hidden - refills the suggestions based on current input text. Defined by select property.
(Ctrl/Shift) + Space (32)	Select the first element in the list. Defined by autocomplete property. Works with Ctrl modifier key or Shift modifier key.
(Ctrl/Shift) + Enter (13)	Same as previous, but also hides the suggestions list.

密钥(密钥代码)	描述
Escape (27)	如果显示建议列表-将其隐藏。 由hideList属性定义。
ArrowDown (40)	如果建议列表是隐藏的，请显示它。 由selectionDown属性定义。
ArrowUp (38)/下ArrowDown (40)	通过建议循环(悬停)。 分别由selectionUp / selectionDown属性定义。
Enter (13)	如果显示了列表，则选择突出显示的元素；如果隐藏了列表，则根据当前输入文本重新填充建议。 由select属性定义。
(Ctrl/Shift) + Space (32)	选择列表中的第一个元素。 由autocomplete属性定义。 与Ctrl修改键或Shift修改键一起使用。
(Ctrl/Shift) + Enter (13)	与上一个相同，但也隐藏了建议列表。

JS object:

JS对象：

{
  selectionUp: [38],
  selectionDown: [40],
  select: [13],
  hideList: [27],
  autocomplete: [32, 13]
}

---

---

组件API (Component API)

TLDR (TLDR)

Click to expand

点击展开

<!-- 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-count="10"
  :min-length="3"
  :debounce="100"
  :destyled="false"
  :remove-list="false"
  :filter-by-query="false"
  :filter="customFilterFunction"
  :value="defaultValue"
  :controls="{
    selectionUp: [38, 33],
    selectionDown: [40, 34],
    select: [13, 36],
    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>

---

---

CSS类结构 (CSS class structure)

If there's a need to customize the appearance of the component, here's the internal class-structure:

如果需要自定义组件的外观，则为内部类结构：

// .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
    .suggest-item

---

---

API定义 (API definitions)

道具 (Props)

Name	Type	Default	Description
controls v1.2.0	Object	See default controls	Determines the keyboard shortcuts in key-codes (for browser-compatibility purposes). Arrays provide the ability to assign multiple keys to one action. Consists of 5 array fields: selectionUp, selectionDown, select, hideList and autocomplete, all of which are optional.
max-suggestions	Number	10	The maximum amount of suggestions to display. Set to 0 for infinite suggestions.
display-attribute	String	'title'	The property in a suggestion object to display in a list. Supports dotted paths.
value-attribute	String	'id'	The property in a suggestion object to use as a unique key. Supports dotted paths.
list	Funciton or Array	() => []	The array provider function, must accept a query as its only argument. Can return an array or a promise. Can be async. The component behaves as a simple input without this function.
debounce	Number	0	Determines the list debounce (a time between the input event and a function execution).
destyled	Boolean	false	Whether to cancel the default styling of input and suggestions list.
remove-list	Boolean	false	If true - the suggestion list will be always hidden.
filter-by-query	Boolean	false	Whether to filter the resulting suggestions by input's text query (make it a search component).
filter	Function	-	A custom function for filtering the suggestion results. Used only if filter-by-query is set true.
mode v1.4.0	String	'input'	The v-model event. Determines the event, that triggers v-model. Can be one of 'input' (v-model binds a displayed property) or 'select' (v-model binds a selected item).
type, value, pattern, etc...			All of the HTML5 input attributes with their respected default values.

名称	类型	默认	描述
controls v1.2.0	目的	查看默认控件	确定按键代码中的键盘快捷键(出于与浏览器兼容的目的)。 数组提供了将多个键分配给一个动作的功能。 由5个数组字段组成： selectionUp ， selectionDown ， select ， hideList和autocomplete ，所有这些都是可选的。
max-suggestions	数	10	显示的最大建议数量。 设置为0表示无限建议。
display-attribute	串	'title'	建议对象中的属性，以显示在列表中。 支持虚线路径。
value-attribute	串	'id'	建议对象中的属性，用作唯一键。 支持虚线路径。
list	函数或数组	() => []	数组提供程序函数必须接受查询作为其唯一参数。 可以返回一个数组或一个Promise。 可以是异步的。 没有此功能，该组件的行为就像一个简单的输入。
debounce	数	0	确定list去抖动(输入事件和函数执行之间的时间)。
destyled	布尔型	false	是否取消输入和建议列表的默认样式。
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输入属性及其受尊重的默认值。

模式 (mode)

New in v1.4.0

v1.4.0的新功能

Determines the event, that triggers v-model. Can be one of 'input' (default) or 'select'.

确定触发v-model的事件。 可以是'input' (默认)或'select' 。

For example, if 'input' is chosen - then v-model will update the value each time an input event is fired, setting the input's string.

例如，如果选择'input' ，则每次触发input事件时，v模型都会更新该值，并设置输入字符串。

Same is for 'select' - v-model changes only when something is selected from the list, setting the selected value (string, object or whatever) to its argument.

'select' -仅当从列表中选择某项时，v-model才会更改，并将所选值(字符串，对象或其他)设置为其参数。

A proper use-case for it being when one wants to use the component only for selection binding and custom input for text binding:

一种合适的用例是，当您只想将组件用于选择绑定而将自定义输入用于文本绑定时：

<vue-simple-suggest v-model="selected" mode="select">
  <input v-model="text">
</vue-simple-suggest>

---

---

发射事件 (Emitted Events)

Name	Arguments	Description
input	HTML input event	An outward projection of the current input's event.
focus	HTML focus event	An outward projection of the current input's event.
blur	HTML focus event	An outward projection of the current input's event.
select	Selected suggestion	Fires on suggestion selection (via a mouse click or enter keypress).
hover	Hovered suggestion	Fires each time a new suggestion is highlighted (via a cursor movement or keyboard arrows).
suggestion-click	Selected suggestion, HTML click event	Fires on suggestion element click.
show-list	-	Fires each time the suggestion list is toggled to be shown.
hide-list	-	Fires each time the suggestion list is being hidden.
request-start	Current input value (query)	Fires each time a list function starts executing.
request-done	Resulting suggestions list	Fires when a list function successfully returns a result and forwards that result as an argument.
request-failed	The interrrupting exception	Fires if an exception occurs during the execution of a list funciton.

名称	争论	描述
input	HTML输入事件	当前输入事件的向外投影。
focus	HTML焦点事件	当前输入事件的向外投影。
blur	HTML焦点事件	当前输入事件的向外投影。
select	精选建议	触发建议选择(通过单击鼠标或输入按键)。
hover	悬停的建议	每次高亮显示新建议时触发(通过光标移动或键盘箭头)。
suggestion-click	选定建议，HTML单击事件	在建议元素点击时触发。
show-list	--	每次切换建议列表以显示时触发。
hide-list	--	每次隐藏建议列表时触发。
request-start	当前输入值(查询)	每当list函数开始执行时触发。
request-done	结果建议清单	当list函数成功返回结果并将该结果作为参数转发时触发。
request-failed	中断异常	如果在执行list期间发生异常，则触发。

---

---

参考方法 (Ref Methods)

accessed via $refs.*your ref name here*

通过$refs.*your ref name here*访问$refs.*your ref name here*

Name	Arguments	Description
showList	-	Shows the suggestion list. Emits the respected event.
hideList	-	Hides the suggestion list. Emits the respected event.
getSuggestions	query: string	Gets and processes suggestions from the list prop. Returns a promise. Emits the requestStart, requestDone and requestFailed events.
research	-	Debounced getSuggestions on the current input value.
clearSuggestions	-	Clears the suggestions array.
select	suggestion	Selects the passed suggestion. Emits the respected event.
hover	suggestion	Hovers over the passed suggestion. Emits the respected event.
displayProperty	suggestion	Returns the displayed property of a suggestion.
valueProperty	suggestion	Returns the value property of a suggestion.

名称	争论	描述
showList	--	显示建议列表。 发出备受尊敬的事件 。
hideList	--	隐藏建议列表。 发出备受尊敬的事件 。
getSuggestions	query ：字符串	从list道具获取并处理建议。 返回承诺。 发出requestStart ， requestDone和requestFailed 事件 。
research	--	对当前输入值的getSuggestions进行反跳。
clearSuggestions	--	清除suggestions数组。
select	建议	选择传递的建议。 发出备受尊敬的事件 。
hover	建议	将鼠标悬停在通过的建议上。 发出备受尊敬的事件 。
displayProperty	建议	返回建议的显示属性。
valueProperty	建议	返回建议的value属性。

---

---

参考事件处理程序 (Ref Event Handlers)

accessed via $refs.*your ref name here*

通过$refs.*your ref name here*访问$refs.*your ref name here*

You can use these to imitate some of the component's behaviours.

您可以使用它们来模仿组件的某些行为。

Name	Arguments	Description
showSuggestions	Alias for onInputClick. Will replace it in the future releases
onInput	HTML input event	Fires whenever the input text is changed. Emits the input event.
onFocus	HTML focus event	Fires whenever the input comes into focus, emits the focus event.
onBlur	HTML focus event	Antonym to onFocus.
onAutocomplete	-	Fires when the autocomplete keyboard shortcut is pressed. Selects the first suggestion.
onListKeyUp	HTML keyup event	Fires on component keyup. Internally used for hiding the list.
moveSelection	Alias for onArrowKeyDown. Will replace it in the future releases.

名称	争论	描述
showSuggestions	onInputClick别名。 在将来的版本中将替换它
onInput	HTML输入事件	每当输入文本更改时触发。 发出input事件。
onFocus	HTML焦点事件	每当输入成为焦点时触发，发出focus事件。
onBlur	HTML焦点事件	onFocus反义词。
onAutocomplete	--	按下自动完成键盘快捷键时触发。 选择第一个建议。
onListKeyUp	HTML按键事件	在组件键盘上触发。 内部用于隐藏列表。
moveSelection	onArrowKeyDown别名。 在将来的版本中将替换它。

---

---

参考数据 (Ref Data)

accessed via $refs.*your ref name here*

通过$refs.*your ref name here*访问$refs.*your ref name here*

Name	Default	Description
selected	null	Currently selected element.
hovered	null	Currently hovered element.
suggestions	[]	Current suggestions list.
listShown	false	Is suggestion list shown.
inputElement	null	Currently used HTMLInputElement.
canSend	true	Whether the assigned getListFuncion can be executed.
timeoutInstance	null	The timeout until next getListFunction execution.
text	$props.value	Current input text.
slotIsComponent	false	Whether this current custom input is a vue-component.
listIsRequest	-	Whether the list prop is a function.
input	-	A ref to the current input (component or vanilla).
hoveredIndex	-	The current hovered element index.
controlScheme	Default Controls	The current controls scheme.
isPlainSuggestion	false	Whether the current suggestions list consists of plain strings (not objects).
isClicking	false	true if the user currently clicks.
isOverList	false	true if the user currently hovers over suggestions list.
isInFocus	false	true if the component is currently in focus.
isTabbed	false	true if the user pressed tab, while the component is in focus.

名称	默认	描述
selected	null	当前选择的元素。
hovered	null	当前悬停的元素。
suggestions	[]	当前建议列表。
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	如果在组件处于焦点状态时用户按下Tab键，则为true 。

---

---

插槽 (Slots)

自定义输入 (Custom input)

default slot (optional)

默认插槽(可选)

Supports nesting. Input props can be passed to a custom input to avoid their processing by vue-simple-suggest. Defaults to a simple input with props passed to vue-simple-suggest.

支持嵌套。 可以将输入道具传递给自定义输入，以免由vue-simple-uggest处理。 默认为简单输入，并将道具传递给vue-simple-suggest。

Warning: v-model on a custom input IS NOT the same as v-model on vue-simple-suggest!

警告： v-model上的自定义输入不一样的v-model上VUE-简单建议！

<!--  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>
  <div>
    <section>
      <input type="email">
    </section>
  </div>
</vue-simple-suggest>

<!--  Vue component example (also supports nesting):  -->
<vue-simple-suggest>
  <my-custom-input-somponent></my-custom-input-somponent>
</vue-simple-suggest>

自定义建议项 (Custom suggestion item)

suggestion-item slot (optional)

suggestion-item广告位(可选)

Description

描述

Allows custom html-definitons of the suggestion items in a list. Defaults to <span>{{ displayAttribute(suggestion) }}</span>

允许列表中的建议项的自定义html-definitons。 默认为<span>{{ displayAttribute(suggestion) }}</span>

Accepts the suggestion object and a query text as a slot-scope attribute values.

接受suggestion对象和query文本作为slot-scope属性值。

<!-- Example: -->
<vue-simple-suggest>
  <div slot="suggestion-item" slot-scope="{ suggestion, query }">
    <div>{{ suggestion.title }} by {{ suggestion.author }}</div>
  </div>
</vue-simple-suggest>

Custom buttons inside of suggestion items

建议项目中的自定义按钮

If you want to add some action buttons to the suggetion items, just use the .stop directive modifier to prevent the default suggestion-click:

如果要在建议项中添加一些操作按钮，则只需使用.stop指令修饰符即可防止默认suggestion-click ：

<!-- Example: -->
<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 this case, the buttons will ONLY execute the bound method and will not select the suggested item.

在这种情况下，按钮将仅执行绑定方法，而不会选择建议的项目。

Manual autocomplete

手动自动完成

If there's a need to autocomplete the suggestion in the input instead of selecting it, you can use the autocomplete() function in the slot's scope:

如果需要在输入中自动完成建议而不是选择建议，则可以在广告位范围内使用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 Data

参考资料

In cooperation with ref fields this slot can be used to drastically transform the suggestion list behaviour.

与ref字段配合使用，该插槽可用于彻底转换建议列表的行为。

One of the simplest examples - highlighting the query text in the results:

最简单的示例之一-在结果中突出显示查询文本：

<div slot="suggestion-item" slot-scope="scope">
  <span v-html="boldenSuggestion(scope)"></span>
</div>

boldenSuggestion({ suggestion, query }) {
  let result = this.$refs.vueSimpleSuggest.displayProperty(suggestion);

  if (!query) return result;

  const replace = str => (result = result.replace(str, str.bold()));
  const texts = query.split(/[\s-_/\\|\.]/gm).filter(t => !!t) || [''];
  const processors = [
    s => s[0].toUpperCase() + s.substr(1),
    s => s.toLowerCase(),
    s => s.toUpperCase(),
    s => s
  ];
  texts.forEach(text => processors.forEach(processor => replace(processor(text))));

  return result;
}

Result via Google Books search API:

通过Google图书搜索API的结果：

自定义杂项插槽 (Custom miscellanious item slots)

misc-item-above and misc-item-below slots (optional)

插槽misc-item-above misc-item-below插槽misc-item-below (可选)

Allow custom elements to be shown in suggestion list. These elements never dissapear from the list, niether can they be selected nor hovered on.

允许自定义元素显示在建议列表中。 这些元素永远不会从列表中消失，无论是选择还是悬停都不能。

These can be used for decoration, loaders, error messages and etc.

这些可用于装饰，装载机，错误消息等。

Do not have defaults, so are not shown until defined.

没有默认值，因此直到定义后才显示。

Accept the suggestions array and a query text as a slot-scope attribute values.

接受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>

These slots can also be used to handle empty results, like this:

这些插槽也可以用于处理空结果，如下所示：

<!-- Main slot template -->
<template slot="misc-item-above" slot-scope="{ suggestions, query }">

  <!-- Sub-template if have any suggestions -->
  <template v-if="suggestions.length > 0">
    <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>

  <!-- Show "No result" otherwise, if not loading new ones -->
  <template v-else-if="!loading">
    <div class="misc-item">
      <span>No results</span>
    </div>
  </template>

</template>

翻译自: https://vuejsexamples.com/simple-yet-feature-rich-autocomplete-component-for-vue-js/

组件用.vue还是.js