Vue.js Autosuggest组件

Vue.js Autosuggest组件
插件名称 vue-autosuggest
发布时间 2020年6月21日
插件作者 darrenjennings

输入字段的最小自动完成/自动建议组件。

变更日志:

v2.2.0(06/18/2020)

  • a11y更新

特征:

  • WAI-ARIA使用Vue的功能构建的完整自动建议组件。
  • 使用内置的默认值或自定义组件进行渲染的完全控制。
  • 轻松集成AJAX数据获取以进行列表显示。
  • 支持多个部分。
  • 对CSS没有意见,可以完全控制样式。
  • 经过严格测试。

安装和下载:

# Yarn
$ yarn add vue-autosuggest

# NPM
$ npm install vue-autosuggest --save

使用:

将VueAutosuggest全局加载到您的vue应用中。

import VueAutosuggest from "vue-autosuggest";
Vue.use(VueAutosuggest);

或在组件内部:

import { VueAutosuggest } from 'vue-autosuggest';
export default {
  ...
  components: {
      VueAutosuggest
  }
  ...
};

将组件放入您的应用程序中!

<vue-autosuggest
    :suggestions="[{data:['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn']}]"
    :input-props="{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}"
    @input="onInputChange"
    @selected="selectHandler"
    @click="clickHandler"
>  
  <template slot-scope="{suggestion}">
    <span class="my-suggestion-item">{{suggestion.item}}</span>
  </template>
</vue-autosuggest>