vue simple suggest下载 - vue simple suggest源码下载

vue-简单建议

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

安装

npm install --save vue-simple-suggest

有关更多选项，请参阅安装指南。

vue-简单建议
- 安装
- 目录
- 它是什么
  - 特征
  - 新功能？
- 示例：
  - 简单的例子
  - 异步示例
- 安装
  - 国家公共管理
  - 拆包
  - 输入
    - 聚合物填料
  - 用法
- 构建设置
- 默认控件
- 组件API
  - 总长DR
  - CSS类结构
    - 过渡
  - API定义
    - 道具
      - 模式
    - 发出的事件
    - 参考方法
    - 参考事件处理程序
    - 参考数据
  - 老虎机
    - 自定义输入
    - 自定义输入的可访问性
    - 自定义建议项
    - 自定义杂项物品槽
- 贡献者

它是什么

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

事实上，它的功能非常丰富，以至于可以用它做一些疯狂的事情，比如

模仿下拉菜单和下拉菜单
将建议列表变成实际的建议表
使用任何类型的自定义输入（如 type=button、radio 等）
...还有更多的事情

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

特征

v-model支持。
自动辅助功能属性（WAI-ARIA 完整）
切换v-model类型（选择/输入）。
通过默认插槽自定义输入元素。
通过命名范围槽自定义列表项。
提供了默认输入元素的所有 HTML5 有效属性（ type 、 tabindex等...）。
可定制的键盘控制。
丰富而简单的API。
用于快速轻松地重新设计样式的 CSS 类。
许多构建变体可供选择。
灵活且可定制的组件设计。
可从库导入的 IE 可选填充。

对于该组件来说，所有的 props、events 和 slot 都是可选的，因此无需任何配置即可使用它。

新功能？

如果您觉得缺少一些重要的东西（或发现了错误） - 请随意创建一个问题。 :)

示例：

要使用该组件，只需通过 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+ 提供了最少的可选 polyfills - 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

默认控件

v1.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 ]
}

组件API

总长DR

点击展开

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

CSS类结构

如果需要自定义组件的外观，这里是内部类结构：

 // .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`元素本身）。

过渡

v1.8.0 中的新功能

您还可以通过在.suggestions div 上为名为vue-simple-suggest转换定义 css 规则来定义自定义列表转换：

. 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 ;
}

API定义

道具

姓名	类型	默认	描述
`controls` ^v1.2.0	目的	查看默认控件	确定键码中的键盘快捷键（出于浏览器兼容性目的）。数组提供了将多个键分配给一个操作的能力。由5个数组字段组成： `selectionUp` 、 `selectionDown` 、 `select` 、 `hideList`和`autocomplete` ，所有这些都是可选的。
`max-suggestions`	数字	`10`	要显示的最大建议数量。设置为 0 可获得无限建议。
`min-length`	数字	`1`	输入中触发建议列表的最小符号数量。如果值为 0， `vue-simple-suggest`开始表现为下拉菜单。
`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`	功能	-	用于过滤建议结果的自定义函数，它接受单个项目和要过滤的查询作为其 2 个参数。仅当`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`	是否保持输入打开，允许用户选择多个输入

模式

v1.4.0 中的新功能

确定触发v-model事件。可以是'input' （默认）或'select'之一。

例如，如果选择'input' - 那么 v-model 将在每次触发input事件时更新值，设置输入的字符串。

'select'也是如此 - 仅当从列表中选择某些内容时，v-model 才会更改，并将所选值（字符串、对象或其他值）设置为其参数。

一个正确的用例是当人们只想使用该组件进行选择绑定和文本绑定的自定义输入时：

 < 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 keyup 事件	在组件 keyup 上调用。内部用于隐藏列表。
`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`	指定的getListFunction是否可以执行。
`timeoutInstance`	`null`	下一次执行 getListFunction 之前的超时时间。
`text`	`$props.value`	当前输入文本。
`slotIsComponent`	`false`	当前的自定义输入是否是 vue 组件。
`listIsRequest`	-	list 属性是否是一个函数。
`input`	-	对当前输入（组件或普通输入）的引用。
`hoveredIndex`	-	当前悬停的元素索引。
`controlScheme`	默认控件	当前的控制方案。
`isPlainSuggestion`	`false`	当前建议列表是否由纯字符串（而不是对象）组成。
`isClicking`	`false`	如果用户当前单击，则为`true` 。
`isOverList`	`false`	如果用户当前将鼠标悬停在建议列表上，则为`true` 。
`isInFocus`	`false`	如果组件当前处于焦点状态， `true` 。
`isTabbed`	`false`	如果用户在组件处于焦点状态时按下 Tab 键， `true` 。
`isSelectedUpToDate`	`false`	`true`如果用户自上次选择以来尚未进行任何输入，因此该选择仍然相关。

老虎机

自定义输入

默认插槽（可选）

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

警告：自定义输入上的v-model与 vue-simple-suggest 上的v-model不同！

 <!--  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支撑。

自定义输入组件应该（为了避免使用限制）：

不停止内部输入 HTML 元素的任何事件传播。
使用focus和blur事件转发原始事件参数。

如果您的自定义组件的vue-simple-suggest似乎对外部变量更改没有反应 - 将两个组件的 v-model 绑定到同一个变量，如下所示：

 < vue-simple-suggest v-model =" model " >
  < my-custom-input-somponent v-model =" model " > </ my-custom-input-somponent >
</ vue-simple-suggest >

自定义输入的可访问性

v1.9.0 中的新功能

只要您的自定义输入组件包含 html <input>元素， vue-simple-suggest就会自动为默认<input>元素和任何自定义输入注入 3 个必要的 ARIA 属性。

这些属性确保依赖屏幕阅读器的用户可以使用自动完成功能。

姓名	价值	描述
咏叹调自动完成	`"list"`	指示文本输入的自动完成行为是在弹出窗口中建议可能值的列表。
咏叹调控制	`suggestions`列表的 IDREF	列出建议值的弹出元素的 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 >

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

手动自动完成

如果需要自动完成输入中的建议而不是选择它（例如谷歌搜索的移动建议），您可以在插槽范围内使用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 >

参考数据

与 ref 字段配合，该槽可用于彻底改变建议列表行为。

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

 < 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' ) ;
}

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

自定义杂项物品槽

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 >

贡献者

感谢这些优秀的人（表情符号键）：

_阿列克谢？	_凯伦？	_{西蒙·科尔科拉} ？	_{罗伯森·科斯塔} ？	_{罗斯迪·卡西姆}	_{安托万马蒂亚} ？	_{马蒂亚斯·马丁} ？
_{罗布·布莱恩} ？？	_伍克先生？	_纳塔姆？	_彼得？	_RM福加蒂	_{布赖恩·蒙萨莱斯}	_米拉76 ？
_{安德烈·洛夫伯格} ？	_{布鲁诺·蒙泰罗} ？	_{汉内萨阿萨梅茨} ？	_吉米？	_{威尔·普莱恩} ？	_劳里911 ？	_{亚历克斯·希里亚维茨} ？
_{贝努德·卡尼} ？	_{海·克拉宁}	_什普内？？	_{佩塔·德拉戈斯·安德烈} ？	_肖伊托	_山源0915 ？