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 >

在這種情況下，按鈕將僅執行綁定方法，而不會選擇建議的項目。

手動自動完成

如果需要自動完成輸入中的建議而不是選擇它（例如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 >

參考數據

與 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 ？