Autocomplete 自动完成

示例

建议触发时机

设置 suggest-trigger 来指定触发建议的时机。

suggest on input

suggest on focus

<template>
<article class="autocomplete-normal-demo">
  <section>
    <h3>suggest on input</h3>
    <veui-autocomplete
      :datasource="suggestions"
      placeholder="请输入"
      clearable
    />
  </section>
  <section>
    <h3>suggest on focus</h3>
    <veui-autocomplete
      :datasource="coffees"
      placeholder="请输入"
      suggest-trigger="focus"
    />
  </section>
</article>
</template>

<script>
import { Autocomplete } from 'veui'

export default {
  components: {
    'veui-autocomplete': Autocomplete
  },
  data () {
    return {
      suggestions: [
        {
          value: 'Moka'
        },
        {
          value: 'Turkish'
        },
        {
          value: 'latte'
        },
        {
          value: 'cappuccino'
        }
      ],
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          options: [
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          options: [
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          options: [
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.autocomplete-normal-demo {
  display: flex;

  section + section {
    margin-left: 60px;
  }
}
</style>

严格模式

设置 strict 属性来指定严格模式，若输入值没有完全匹配建议值，那么在失焦时会清空输入值。

在 GitHub 上编辑此页编辑

<template>
<article class="autocomplete-normal-demo">
  <section>
    <veui-autocomplete
      :datasource="suggestions"
      placeholder="请输入"
      suggest-trigger="focus"
      strict
    />
  </section>
</article>
</template>

<script>
import { Autocomplete } from 'veui'

export default {
  components: {
    'veui-autocomplete': Autocomplete
  },
  data () {
    return {
      suggestions: [
        {
          value: 'Moka'
        },
        {
          value: 'Turkish'
        },
        {
          value: 'latte'
        },
        {
          value: 'cappuccino'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.autocomplete-normal-demo {
  display: flex;

  section + section {
    margin-left: 60px;
  }
}
</style>

自定义搜索逻辑

设置 match 属性来自定义高亮逻辑；设置 filter 属性来自定义搜索命中逻辑。

match 用于高亮显示匹配文本的逻辑；而 filter 是控制是否命中。默认情况下 filter 会过滤掉未被 match 匹配的节点，且将包含非叶子节点。如希望搜索结果中都是叶子节点，可通过重写 filter 过滤掉非叶子节点。

大小写敏感搜索叶子节点

在 GitHub 上编辑此页编辑

<template>
<article class="autocomplete-normal-demo">
  <section>
    <h3>大小写敏感搜索叶子节点</h3>
    <veui-autocomplete
      :datasource="suggestions"
      placeholder="请输入"
      suggest-trigger="focus"
      :match="match"
      :filter="filter"
    />
  </section>
</article>
</template>

<script>
import { Autocomplete } from 'veui'

export default {
  components: {
    'veui-autocomplete': Autocomplete
  },
  data () {
    return {
      suggestions: [
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          options: [
            {
              value: 'Moka'
            }
          ]
        },
        {
          value: 'Turkish'
        },
        {
          value: 'latte'
        },
        {
          value: 'cappuccino'
        }
      ]
    }
  },
  methods: {
    match ({ label }, keyword) {
      const index = label.indexOf(keyword)
      return index >= 0
        ? [[index, index + keyword.length]]
        : false
    },
    filter ({ options }, _, { offsets }) {
      // 不要父节点，只要叶子节点
      return options && options.length
        ? false
        : offsets === true || (!!offsets && !!offsets.length)
    }
  }
}
</script>

<style lang="less" scoped>
.autocomplete-normal-demo {
  display: flex;

  section + section {
    margin-left: 60px;
  }
}
</style>

API

属性

名称类型默认值描述

datasource

Array<string | Object>=

[]

数据源数组，项目为 Object 时字段为 {label, value, children, ...}。

名称	类型	描述
`label`	`string`	节点的文字描述。
`value`	`string`	节点对应的值，一般是页内 hash，如 `#button` 。
`children`	`Array<Object>=`	节点的子节点数组，数组项类型同 `items` 数组项。

value

*

v-model

当前选中的值。

disabled boolean= false 是否为禁用状态。

readonly boolean= false 是否为只读状态。

match (item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]> - 支持自定义高亮逻辑，默认进行大小写不敏感的子串匹配。

filter (item, keyword, { ancestors, offsets }) => boolean - 支持自定义搜索命中逻辑。

suggest-trigger string | Array<string>= 'input' 触发建议下拉面板的时机，可用值有：'input'、'focus'。

expanded

boolean=

false

.sync

建议面板是否展开（如果 suggestions 中没有待选项，则即使为 true 时面板也会关闭）。

placeholder string= - 输入占位符。

clearable boolean= false 是否显示清除按钮。

composition boolean= false 是否感知输入法输入过程的值。

select-on-focus boolean= false 聚焦时是否自动选中输入框文本。

maxlength number= - 输入字符串的长度限制。

strict boolean= false 输入字符串到达长度限制以后是否禁止继续输入。

get-length function(string): number= 自定义的字符长度计算函数。

trim

boolean | string=

false

是否移除前后空格。当为 true 时，会移除前后空格，当为 false 时，不移除前后空格。设置为字符串时，按指定方式进行移除。

值	描述
`both`	移除两端空格。等同于 `true` 时的行为。
`start`	移除开始空格。
`end`	移除末尾空格。

autofocus boolean= false 是否自动获取焦点。

插槽

名称描述

suggestions

下拉建议面板插槽。

名称	类型	描述
`datasource`	`Array<string \| Object>`	数据源，类型同 `datasource` 属性。
`keyword`	`string`	搜索关键词。

option-label

下拉面板中选项插槽。

名称	类型	描述
`label`	`string`	用来显示的节点文案，不存在则取 `value`。
`value`	`string`	用来实际选中的值。
`matches`	`Array<{text: string, matched: boolean}>`	匹配情况，一个节点可能被切分成多断文本，`text` 表示该段文本， `matched` 表示该段文本是否匹配。

事件

名称	描述
`input`	`v-model` 当在 `input` 中输入或下拉面板中选值会触发该事件，参数是当前输入值或选中时的选中项目的 `value`。
`select`	采纳建议时触发，参数是当前值。
`toggle`	提示面板展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。
`clear`	清除当前值时触发。

在 GitHub 上编辑此页编辑