Autocomplete

Demos

Basic Trigger

Set suggest-trigger specify trigger suggestions.

suggest on input

请输入

suggest on focus

请输入
Edit this page 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

Set strict property to strict mode. If the input value does not exactly match the recommended value, the input value will be cleared when the focus is out of focus.

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

Set match property to customize the highlighting logic; Set filter property to customize the search hit logic.

大小写敏感搜索叶子节点

请输入
Edit this page 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>=[]

Data source array, item is Object, field is {label, value, children, ...}.

NameTypeDescription
labelstringText description of the node.
valuestringValue corresponding to the node is generally an in-page hash, such as #button.
childrenArray<Object>=Child node array of the node, Array item type is the same as the items array item.
value*-

v-model

Selected value.

disabledboolean=falseWhether disabled state.
readonlyboolean=falseWhether read only status.
match(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>-Supports custom highlighting logic, and matches case-insensitive substrings by default.
filter(item, keyword, { ancestors, offsets }) => boolean-Support custom search hit logic.
suggest-triggerstring | Array<string>='input'Trigger the suggestion drop-down panel, the available values are: 'input', 'focus'.
expandedboolean=false

.sync

Whether the panel should be expanded (if there is no option in suggestions, panel will be closed even if it is true).

placeholderstring=-Placeholder.
clearableboolean=falseWhether clear button is displayed.
compositionboolean=falseWhether perceive value of input method input process.
select-on-focusboolean=falseWhether to automatically select the input box text when focused.
maxlengthnumber=-The length of the input string is limited.
strictboolean=falseMaximum input length.
get-lengthfunction(string): number=Customize character length calculation function.
trimboolean | string=false

Remove before and after spaces. When it is true, the before and after spaces will be removed; when it is false, the before and after spaces will not be removed. When it is set to a string, it will be removed in the specified way.

ValueDescription
bothRemove spaces at both ends. Equivalent to the behavior when true.
startRemove front space.
endRemove end spaces.
autofocusboolean=falseFocus automatically.

Slots

NameDescription
suggestions

Pull down to suggest the panel slot.

NameTypeDescription
datasourceArray<string | Object>data source, type is the same as the datasource property.
keywordstringSearch keyword.
option-label

Option slot in the drop down panel.

NameTypeDescription
labelstringNode copy used to display, if doesn't exist, it will take value.
valuestringActually select the value.
matchesArray<{text: string, matched: boolean}>Case of matching, a node may be divided into multiple texts, text indicates the text, and matched indicates whether the text matches.

Events

NameDescription
input

v-model

Event will be triggered when inputting in input or selecting a value in drop down panel. Parameter is current input value or the value of selected item when selected.

selectTriggered when suggestion is adopted, the parameter is current value.
toggleTriggered when expanded state of prompt panel is switched, callback parameter is (expanded: boolean). expanded indicates whether operation will trigger prompt panel to expand or collapse.
clearTriggers when current value is cleared.
Edit this page on GitHubEdit