Autocomplete

Demo

Basic Trigger

Set suggest-trigger specify trigger suggestions.

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

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>

Custom Search

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

match is used to highlight the logic of matching text; while filter is to control whether it is hit or not. By default, filter will filter out nodes are not matched by match, and will include non-leaf nodes. If you want all leaf nodes in the search results, you can filter out non-leaf nodes by rewriting filter.

大小写敏感搜索叶子节点

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

Name Type Default Description

datasource

Array<string | Object>=

[]

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

Name	Type	Description
`label`	`string`	Text description of the node.
`value`	`string`	Value corresponding to the node is generally an in-page hash, such as `#button`.
`children`	`Array<Object>=`	Child node array of the node, Array item type is the same as the `items` array item.

value

*

v-model

Selected value.

disabled boolean= false Whether disabled state.

readonly boolean= false Whether 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-trigger string | Array<string>= 'input' Trigger the suggestion drop-down panel, the available values are: 'input', 'focus'.

expanded

boolean=

false

.sync

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

placeholder string= - Placeholder.

clearable boolean= false Whether clear button is displayed.

composition boolean= false Whether perceive value of input method input process.

select-on-focus boolean= false Whether to automatically select the input box text when focused.

maxlength number= - The length of the input string is limited.

strict boolean= false Maximum input length.

get-length function(string): number= Customize character length calculation function.

trim

boolean | 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.

Value	Description
`both`	Remove spaces at both ends. Equivalent to the behavior when `true`.
`start`	Remove front space.
`end`	Remove end spaces.

autofocus boolean= false Focus automatically.

Slots

Name Description

suggestions

Pull down to suggest the panel slot.

Name	Type	Description
`datasource`	`Array<string \| Object>`	data source, type is the same as the `datasource` property.
`keyword`	`string`	Search keyword.

option-label

Option slot in the drop down panel.

Name	Type	Description
`label`	`string`	Node copy used to display, if doesn't exist, it will take `value`.
`value`	`string`	Actually select the value.
`matches`	`Array<{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

Name	Description
`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.
`select`	Triggered when suggestion is adopted, the parameter is current value.
`toggle`	Triggered 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.
`clear`	Triggers when current value is cleared.

Edit this page on GitHubEdit