使用Bootstrap 4和Vue 2的基于列表组的简单预输入/自动完成功能。

安装和下载：

# NPM
$ npm install vue-bootstrap-typeahead --save

dist文件夹中提供了压缩的UMD和CommonJS版本。该组件也可以在unpkg上获得。

<link href="https://unpkg.com/vue-bootstrap-typeahead/dist/VueBootstrapTypeahead.css" rel="stylesheet">
<script src="https://unpkg.com/vue-bootstrap-typeahead"></script>

注册

import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'

// 不要忘记包含引导CSS/SCSS文件!
import 'bootstrap/scss/bootstrap.scss'

// 全局注册
Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead)

// 或

// 本地注册
export default {
    components: {
        VueBootstrapTypeahead
    }
}

基本用法

唯一需要的props是v-model和data数组。

<vue-bootstrap-typeahead
  v-model="query"
  :data="['Canada', 'USA', 'Mexico']"
/>