自动完成(Autocomplete)

Quasar自动完成组件绑定到父文本字段（例如QInput、QSearch、QChipsInput），并在用户输入时向用户提供建议。 提供给用户的建议基于静态结果集或异步函数调用（例如，包含Ajax请求）。

安装

Edit /quasar.conf.js:

framework: {
  components: ['QAutocomplete']
}

基础用法

只要此组件由Vue呈现，它就会捕获所有的Ajax调用。

<!-- 绑定到父QInput -->
<q-input color="amber" v-model="terms" placeholder="Type 'fre'">
  <q-autocomplete
    @search="search"
    :min-characters="3"
    @selected="selected"
  />
</q-input>

<!-- 绑定到父QSearch -->
<q-search v-model="terms" placeholder="Start typing a country name">
  <q-autocomplete @search="search" @selected="selected" />
</q-search>

<!-- 在结果之间添加分隔符 -->
<q-search v-model="terms">
  <q-autocomplete
    separator
    @search="search"
    @selected="selected"
  />
</q-search>



Vue属性

Vue属性 类型 默认值 说明
min-characters 数字 1 最小多少字符触发组件建议某些内容？
max-results 数字 6 我们可以一次显示多少结果？
static-data 对象 None 使用静态建议。无需进行Ajax调用。过滤由自动完成组件提供。
filter 函数 内部实现 如果提供，自动完成将执行自定义过滤。
debounce 数字 500 在按键到寻找新结果之间以毫秒为单位的时间。如果使用AJAX请求，则有利于延迟。
separator 布尔值 false 如果设置为“true”，它会在要从中选择的值之间添加一个分隔符。

Vue方法

不需要手动触发这些方法，因为它们是自动调用的。只有当你的用例非常特殊时才使用它们。

Vue方法 说明
trigger() 触发建议（父文本字段必须聚焦）。
hide() 隐藏建议弹出框。
setValue() 将文本字段字符串设置为提供的值。

Vue事件

Vue事件 说明
@search(terms，Function done) 当搜索开始并提供一些结果时由组件触发。
@selected(item) 当用户选择了一个建议时触发。
@show 当选择弹出框打开时触发。
@hide 当选择弹出框关闭时触发。

搜索事件示例：

function search (terms, done) {
  //用terms做一些事情，比如说一个Ajax调用
  //然后调用done（返回数组）

  //不要忘记调用done！ 当没有结果或错误发生时，
  //只需以空数组作为参数调用。 例如：done([])
}

使用静态数据

当使用静态数据时，指定一个对象（注意它使用了列表和列表项组件的一些属性）：

// 静态数据
{
  // 属性名称将会被filter()使用用于过滤下面的对象数组。
  field: 'value',

  list: [
    {
      value: 'Romania', // 当选中时给出的值
      label: 'Romania', // 作为建议选择项主标签的显示值

      sublabel: 'Continent: Europe', // 可选的
      icon: 'location_city', // 可选的
      stamp: '18 mil', // 可选的
      ...
    },
    ...
  ]
}

以下是可以使用的属性的完整列表：

属性 类型 说明
leftColor 字符串 左侧颜色,来自Quasar调色板。
icon 字符串 左侧图标。
avatar 字符串 头像的静态URL。
letter 字符串 字符。
leftInverted 布尔值 反转模式，但仅适用于图标和字母。
leftTextColor 字符串 仅在使用图标或字母时覆盖默认的“white”文字颜色。
image 字符串 图像的静态URL。
label 字符串 选择的主标签。
sublabel 字符串 选择的副标签。
labelLines 字符串/数字 标签可以扩展到的行数。
sublabelLines 字符串/数字 副标签可以扩展到的行数。
inset 布尔值 插入标签，如果没有指定左侧内容（没有图标、头像、字母或图片）。
rightColor 字符串 右侧颜色,来自Quasar调色板。
rightIcon 字符串 右侧图标。
rightAvatar 字符串 右侧头像的静态URL。
rightLetter 字符串 右侧字符。
rightImage 字符串 右侧图片静态URL。
rightInverted 布尔值 反转模式，但仅适用于图标和字母。
rightTextColor 字符串 仅在使用图标或字母时覆盖默认的“white”文字颜色。
stamp 字符串 用于右侧。例如：’10分钟前’。 
<template>
  <q-search inverted color="secondary" v-model="terms" placeholder="Featuring static data">
    <q-autocomplete
      :static-data="{field: 'value', list: countries}"
      @selected="selected"
    />
  </q-search>
</template>

<script>
import countries from 'countries.json'

// 有关必需和可选数据的对象数组，请参见上面的数据格式
export default {
  data () {
    return {
      terms: '',
      countries
    }
  }
}
</script>

定制过滤器

要执行像模糊搜索一样的自定义过滤，请提供具有以下签名的可选函数：

<template>
  <q-search v-model="terms">
    <!-- 提供自定义过滤函数 -->
    <q-autocomplete
      :filter="myFilter"
      @search="search"
      @selected="selected"
    />
  </q-search>
</template>

<script>
// fuzzysearch (needle, haystack) { return true|false }

export default {
  ...,
  methods: {
    myFilter(terms, { field, list }) {
      const token = terms.toLowerCase();
      return list.filter(item => fuzzysearch(token, item[field].toLowerCase()));
    }
  }
}
</script>

使用异步方法（Ajax调用？）

如果您想从服务器调用数据，则可以使用search()方法执行以下操作。

<template>
  <q-search v-model="terms" placeholder="Start typing a country name">
    <q-autocomplete @search="search" @selected="selected" />
  </q-search>
</template>

<script>
export default {
  ...
  methods: {
    search (terms, done) {
      // 创建一个Ajax调用
      // 然后调用done（返回数组）

      // 不要忘记调用done！ 当没有结果或错误发生时，
      // 只需以空数组作为参数调用。 例如：done([])
    }
  },
  ...
}
</script>
选色器 编辑器（WYSIWYG）