VEUI

VEUI on GitHub
中文

Autocomplete

Examples

Suggestion trigger

Set the suggest-trigger prop to specify when to trigger suggestions.

suggest on input

请输入

suggest on focus

请输入
Edit this demo on GitHubEdit
<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 mode

Set the strict prop to enable strict mode. { maxlength?: boolean } is used to specify whether the input length is strictly limited and will be automatically truncated if exceeded; { select?: boolean } is used to specify whether the input item must match exactly one of the search suggestions. If no match is found, the input will be automatically cleared when it loses focus.

请输入
0/6
Edit this demo on GitHubEdit
<template>
<article class="autocomplete-normal-demo">
  <section>
    <veui-checkbox v-model="strict.maxlength">
      Strict maxlength
    </veui-checkbox>
    <veui-checkbox v-model="strict.select">
      Strict select
    </veui-checkbox>
  </section>
  <section>
    <veui-autocomplete
      :datasource="suggestions"
      placeholder="请输入"
      suggest-trigger="focus"
      :maxlength="6"
      :strict="strict"
    />
  </section>
</article>
</template>

<script>
import { Autocomplete, Checkbox } from 'veui'

export default {
  components: {
    'veui-autocomplete': Autocomplete,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      strict: {
        maxlength: false,
        select: true
      },
      suggestions: [
        {
          value: 'Moka'
        },
        {
          value: 'Turkish'
        },
        {
          value: 'Latte'
        },
        {
          value: 'Cappuccino'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  display: flex;
  align-items: center;
  gap: 12px;

  & + & {
    margin-top: 20px;
  }
}
</style>

Custom search logic

Set the match prop to customize highlight logic and the filter prop to customize search hit logic.

大小写敏感搜索叶子节点

请输入
Edit this demo on GitHubEdit
<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

Props

NameTypeDefaultDescription
datasourceArray<string | Object>[]

An array of data sources. If an item is an object, it should have the following properties: { label, value, options, ... }.

NameTypeDescription
labelstringThe textual description of the node.
valuestringThe value corresponding to the node.
optionsArray<Object>An array of child nodes, with the same item type as the datasource array.
value*-The value of the input.

v-model

The currently selected value.

disabledbooleanfalseWhether the input is disabled.
readonlybooleanfalseWhether the input is read-only.
match(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>-Supports custom highlighting logic. The default is a case-insensitive substring match.
filter(item, keyword, { ancestors, offsets }) => boolean-Supports custom search hit logic.
suggest-triggerstring | Array<string>'input'Specifies when to trigger the suggestion dropdown panel. Valid values are 'input' and 'focus'.
expandedbooleanfalseWhether the suggestion panel is expanded.

.sync

Whether the suggestion panel is expanded. If there are no options in suggestions, the panel will be closed even if this prop is set to true.

placeholderstring-The placeholder text.
clearablebooleanfalseWhether to show the clear button.
compositionbooleanfalseWhether to perceive the value during the input method editor (IME) input process.
select-on-focusbooleanfalseWhether to automatically select the input box text when focused.
maxlengthnumber-The maximum length of the input string.
strictboolean | Objectfalse

When boolean, the strict mode configures both the maxlength behavior and whether the input must match a suggestion value completely. When Object, you can configure them separately.

NameTypeDescription
maxlengthbooleanWhether to enforce strict input length by disallowing input when it exceeds the maximum length.
selectbooleanWhether the input item must match a suggestion value completely. If it doesn't match, it will be automatically cleared when it loses focus.
get-lengthfunction(string): numberA custom function to calculate the length of characters.
trimboolean | stringfalse

Whether to remove leading and trailing spaces. When true, leading and trailing spaces are removed. When false, leading and trailing spaces are not removed. When set to a string, the removal behavior is specified accordingly.

ValueDescription
bothRemove both leading and trailing spaces. Equivalent to the behavior when true.
startRemove leading spaces.
endRemove trailing spaces.
autofocusbooleanfalseWhether to automatically focus the input.
overlay-classstring | Array | Object-Refers to the overlay-class prop of the Overlay component.
overlay-stylestring | Array | Object-Refers to the overlay-style prop of the Overlay component.

Slots

NameDescription
suggestions

Slot for the dropdown suggestion panel.

NameTypeDescription
datasourceArray<string | Object>Data source, same type as datasource prop.
keywordstringSearch keyword.
option-label

Slot for each option in the dropdown panel.

NameTypeDescription
labelstringDisplay text for the node, fallback to value if not exist.
valuestringActual selected value.
matchesArray<{text: string, matched: boolean}>Matching status, a node can be split into multiple text chunks, where text is the text of each chunk, matched indicates if each chunk is matched or not.
no-data

Content to be displayed when there are no matching options. By default, the dropdown menu is closed when there are no options.

NameTypeDescription
keywordstringSearch keyword.

Events

NameDescription
input

v-model

Triggered when the input value changes or a value is selected from the dropdown panel. The parameter is the current input value or the value property of the selected item.

selectTriggered when a suggestion is accepted, with the current value as the parameter.
toggleTriggered when the suggestion panel toggles its expanded state, with (expanded: boolean) as the callback parameter. expanded indicates if the panel will be expanded or collapsed after the operation.
clearTriggered when the current value is cleared.

CSS

NameTypeDefaultDescription
--dls-dropdown-max-display-items<integer>8

The maximum number of items to display simultaneously in the dropdown options. The maximum height of the dropdown will be calculated based on this value.

Edit this page on GitHubEdit
© Baidu, Inc. 2023