vue simple suggestダウンロード - vue simple suggestソースコードのダウンロード

vue-simple-suggest

シンプルでありながら機能が豊富な Vue.js のオートコンプリートコンポーネント

インストール

npm install --save vue-simple-suggest

その他のオプションについては、インストールガイドを参照してください。

vue-simple-suggest
- インストール
- 目次
- それは何ですか
  - 特徴
  - 新機能?
- 例:
  - 簡単な例
  - 非同期の例
- インストール
  - 故宮
  - パッケージを解除する
  - インポート中
    - ポリフィル
  - 使用法
- ビルドセットアップ
- デフォルトのコントロール
- コンポーネントAPI
  - TLDR
  - CSSクラス構造
    - トランジション
  - API定義
    - 小道具
      - モード
    - 発行されたイベント
    - Ref メソッド
    - Ref イベントハンドラ
    - 参照データ
  - スロット
    - カスタム入力
    - カスタム入力でのアクセシビリティ
    - カスタム提案アイテム
    - カスタムのさまざまなアイテムスロット
- 貢献者

それは何ですか

これは、Vue.js 用のシンプルでありながら機能が豊富な提案/オートコンプリートコンポーネントです。

実際、非常に機能が豊富なので、次のようなクレイジーなことが可能です。

ドロップダウンとドロップダウンメニューの模倣
提案リストを実際の提案テーブルに変える
渡された任意のタイプのカスタム入力を処理します (type=button、radio など)。
...その他にもたくさんのこと

そして、おまけにとても軽いです。

特徴

v-modelサポート。
自動アクセシビリティ属性 (WAI-ARIA 完全)
v-modelタイプの切り替え (選択/入力)。
デフォルトのスロットを介したカスタム入力要素。
名前付きスコープスロットを使用したカスタムリスト項目。
デフォルトの入力要素のすべての HTML5 有効なプロパティが提供されます ( type 、 tabindexなど...)。
カスタマイズ可能なキーボードコントロール。
豊富でシンプルな API。
素早く簡単にスタイルを変更するための CSS クラス。
多くのビルドバリアントから選択できます。
柔軟でカスタマイズ可能なコンポーネント設計。
ライブラリからインポート可能な IE 用のオプションのポリフィル。

このコンポーネントではすべてのプロパティ、イベント、スロットはオプションであるため、まったく設定せずに使用できます。

新機能?

何か重要な点が欠けていると思われる場合 (またはバグが見つかった場合)、お気軽に問題を作成してください。 :)

例:

コンポーネントを使用するには、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 >

より高度な例 (Wikipedia 検索を使用) については、ソース例を参照してください。

インストール

故宮

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

デフォルトのコントロール

v1.2.0の新機能

これらはデフォルトのキーボードショートカットです。

controlsプロップを使用してカスタマイズできます。このcontrolsオブジェクトのフィールドはすべてオプションです。

デフォルトのスキーム:

キー（キーコード）	説明
`Escape` (27)	提案リストが表示されている場合は、非表示にします。 `hideList`プロパティによって定義されます。
`ArrowDown` (40)	提案リストが非表示の場合は、表示します。 `showList`プロパティによって定義されます。
`ArrowUp` (38) / `ArrowDown` (40)	候補を循環 (ホバー) します。それぞれ、 `selectionUp` / `selectionDown`プロパティによって定義されます。
(13) `Enter`	リストが表示されている場合は、強調表示された要素を選択します。 `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

TLDR

クリックして展開します

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

既存のクラスやブートストラップのようなフレームワークを使用したい場合は、 '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	物体	デフォルトのコントロールを参照	キーコードのキーボードショートカットを決定します (ブラウザーの互換性を目的とする)。配列を使用すると、1 つのアクションに複数のキーを割り当てることができます。 5 つの配列フィールド: `selectionUp` 、 `selectionDown` 、 `select` 、 `hideList` 、および`autocomplete`で構成されます。これらはすべてオプションです。
`max-suggestions`	番号	`10`	表示する提案の最大数。無限の候補を指定するには 0 に設定します。
`min-length`	番号	`1`	候補リストをトリガーするための入力内のシンボルの最小量。 `vue-simple-suggest`値が 0 の場合、ドロップダウンメニューとして動作し始めます。
`display-attribute`	弦	`'title'`	リストに表示する提案オブジェクトのプロパティ。点線のパスをサポートします。
`value-attribute`	弦	`'id'`	一意のキーとして使用する提案オブジェクトのプロパティ。点線のパスをサポートします。
`list`	関数または配列	`() => []`	配列プロバイダー関数は、唯一の引数としてクエリを受け入れる必要があります。配列または Promise を返すことができます。非同期にすることができます。この関数がなければ、コンポーネントは単純な入力として動作します。
`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`	選択された提案	(マウスのクリックまたは Enter キーの押下による) 候補の選択時に起動されます。
`hover`	ホバーされた提案、ターゲット要素	新しい提案が (カーソルの移動またはキーボードの矢印によって) ハイライトされるたびに起動されます。
`suggestion-click`	選択された提案、HTML クリックイベント	提案要素のクリック時に発生します。
`show-list`	-	提案リストの表示が切り替わるたびに起動します。
`hide-list`	-	提案リストが非表示になるたびに発生します。
`request-start`	現在の入力値（クエリ）	`list`関数の実行が開始されるたびに起動されます。
`request-done`	結果として得られる提案リスト	`list`関数が正常に結果を返し、その結果を引数として転送すると発生します。
`request-failed`	中断例外	`list`関数の実行中に例外が発生した場合に発生します。

Ref メソッド

$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	提案	唯一の引数として渡された提案を使用して、入力テキストをオートコンプリートします。

Ref イベントハンドラ

$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` 。
`isSelectedUpToDate`	`false`	ユーザーが最後に選択してから何も入力していない場合は`true`なので、選択内容はまだ関連しています。

スロット

カスタム入力

デフォルトのスロット (オプション)

ネストをサポートします。入力プロパティをカスタム入力に渡して、vue-simple-suggest による処理を回避できます。デフォルトでは、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の新機能

vue-simple-suggestカスタム入力コンポーネントに html <input>要素が含まれている限り、デフォルトの<input>要素とカスタム入力に必要な 3 つの ARIA 属性を自動的に挿入します。

これらの属性により、スクリーンリーダーに依存するユーザーがオートコンプリートを使用できるようになります。

名前	価値	説明
aria-オートコンプリート	`"list"`	テキスト入力のオートコンプリート動作が、ポップアップで可能な値のリストを提案することであることを示します。
aria-コントロール	`suggestions`リストの IDREF	推奨値をリストするポップアップ要素の IDREF。
aria-activedescendant	ホバーされたオプションの 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 フィールドと連携して、このスロットを使用して、提案リストの動作を大幅に変えることができます。

最も単純な例の 1 つ - 結果内のクエリテキストを強調表示します。

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

貢献者

これらの素晴らしい人々に感謝します (絵文字キー):

_{アレクセイ} ?	_カレン ?	_{シメオン・ケルコラ} ?	_{ロバーソン・コスタ} ?	_{ロディ・カシム}	_{アントインマティヤ} ?	_{マティアス・マーティン} ?
_{ロブ・ブレイン} ? ?	_ウクさん ?	_ナッタム ?	_ペトル ?	_{Rフォガティ}	_{ブライアン・モンサレス}	_ミラ76 ?
_{アンドリー・レフベリ} ?	_{ブルーノ・モンテイロ} ?	_{ハンネサアサメッツ} ?	_ジミー ?	_{ウィル・プレーン} ?	_ラウリ911 ?	_{アレックス・ヒリアベッツ} ?
_{ベフヌード・カーニ} ?	_{ヘイ・クラネン}	_シュプネ ? ?	_{ペタ・ドラゴス＝アンドレイ} ?	_しょいと	_{やまげん0915} ?