Vue 2和Bootstrap 4的自动完成/提前输入组件

vue-bootstrap-typeahead (vue-bootstrap-typeahead)

A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2.

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

安装 (Installation)

> npm i vue-bootstrap-typeahead --save

用法 (Usage)

Import and register the component

导入并注册组件

import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'

// Global registration
Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead)

// OR

// Local registration
export default {
    components: {
        VueBootstrapTypeahead
    }
}

基本用法 (Basic Usage)

The only required attribute is a data array.

唯一需要的属性是data数组。

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

使用API (Working with API's)

The typeahead does not fetch any data, for maximum flexibility it will only work with already loaded API responses in the form of arrays. The serializer attribute allows you to define a function to turn each array item in the response into a text string, which will appear in the results.

预先输入不会获取任何数据，为了获得最大的灵活性，它仅适用于数组形式的已加载API响应。 serializer属性允许您定义一个函数，将响应中的每个数组项转换为文本字符串，该字符串将出现在结果中。

<template>
  <vue-bootstrap-typeahead
    :data="addresses"
    v-model="addressSearch"
    size="lg"
    :serializer="s => s.text"
    placeholder="Type an address..."
    @hit="selectedAddress = $event"
  >
</template>

<script>
import _ from 'underscore'

const API_URL = 'https://api-url-here.com?query=:query'

export default {
  name: 'TestComponent',

  data() {
    return {
      addresses: [],
      addressSearch: '',
      selectedAddress: null
    }
  },

  methods: {
    async getAddresses(query) {
      const res = await fetch(API_URL.replace(':query', query))
      const suggestions = await res.json()
      this.addresses = suggestions.suggestions
    }
  },

  watch: {
    addressSearch: _.debounce(function(addr) { this.getAddresses(addr) }, 500)
  }
}
</script>

属性 (Attributes)

Name	Type	Default	Description
data	Array		Array of data to be available for querying. Required
serializer	Function	input => input	Function used to convert the entries in the data array into a text string.
size	String		Size of the input-group. Valid values: sm or lg
backgroundVariant	String		Background color for the autocomplete result list-group items. See valid values
textVariant	String		Text color for the autocomplete result list-group items. See valid values
inputClass	String		Class to the added to the input tag for validation, etc.
maxMatches	Number	10	Maximum amount of list items to appear.
minMatchingChars	Number	2	Minimum matching characters in query before the typeahead list appears
prepend	String		Text to be prepended to the input-group
append	String		Text to be appended to the input-group

名称	类型	默认	描述
数据	Array		可用于查询的数据数组。 需要
序列化器	Function	input => input	用于将data数组中的条目转换为文本字符串的函数。
尺寸	String		input-group大小。 有效值： sm或lg
backgroundVariant	String		自动完成结果list-group项目的背景颜色。 查看有效值
textVariant	String		自动完成结果list-group项目的文本颜色。 查看有效值
inputClass	String		将类添加到input标签以进行验证等。
maxMatches	Number	10	列表项的最大数量。
minMatchingChars	Number	2	出现预先输入列表之前查询中的最小匹配字符
前置	String		文本要放在input-group
附加	String		要添加到input-group文本

大事记 (Events)

Name	Description
hit	Triggered when an autocomplete item is selected. The entry in the input data array that was selected is returned.
input	The component can be used with v-model

名称	描述
hit	选择自动完成项时触发。 返回输入data数组中所选的条目。
input	该组件可以与v-model一起使用

插槽 (Slots)

There are prepend and append slots available for adding buttons or other markup. Overrides the prepend and append attributes.

有prepend和append插槽可用于添加按钮或其他标记。 覆盖prepend和append属性。

范例/演示 (Examples/Demo)

Clone this repository and run npm run serve and navigate to http://localhost:8080 to launch some examples. The source is in src/views/Home.vue

克隆此存储库，然后运行npm run serve并导航至http：// localhost：8080以启动一些示例。 来源在src/views/Home.vue

翻译自: https://vuejsexamples.com/an-autocomplete-typeahead-component-for-vue-2-and-bootstrap-4/