Autocomplete

Selecting items in a list from a text input.

Import

import { MpAutocomplete } from '@mekari/pixel3'

Playground

API

MpAutocomplete

Props

Events

Slots

Name	Type	Default
id Id of autocomplete.	string	-
data Data of autocomplete.	unknown[]	() => []
model-value Value of autocomplete.	string | number | { [key: string]: unknown }	-
default-is-open If true, popover will open in first render.	boolean	false
placeholder Placeholder of autocomplete	string	-
label-prop Label of autocomplete. Work if data as an array of objects.	string	value
value-prop Value of autocomplete. Work if data as an array of objects.	string	value
group-key Prop to define key. Autocomplete suggestions list will group by defined key.	string	group
content-attrs Optional for customize content attributes.	{ class?: unknown, style?: unknown, [key: string]: unknown }	-
empty-text Text in suggestion when there is no data.	string	No result found
content-loading-text Text in suggestion when content is loading.	string	Loading
button-action-text Text in autocomplete button action.	string	Button
key-code List key code used to select suggestion.	string[]	["Enter"]
is-read-only If true, autocomplete be read only.	boolean	false
is-disabled If true, autocomplete will be disabled.	boolean	false
is-invalid If true, autocomplete is marked as invalid.	boolean	false
is-required If true, autocomplete will be required.	boolean	false
is-full-width If true, autocomplete will span full width of it parent.	boolean	true
is-loading If true, loading icon will be displayed.	boolean	false
is-content-loading If true, loading icon will be displayed on content.	boolean	false
is-clearable If true, allow to remove autocomplete content with clear icon.	boolean	false
is-searchable If true, allow to autocomplete show search input.	boolean	false
is-infinity-scroll If true, autocomplete will enable infinity scroll. Get callback from scroll-end.	boolean	false
is-manual-filter If true, autocomplete filter data will handle manually. Useful when data is being filtered server side.	boolean	false
use-portal If true, autocomplete is rendered with portal.	boolean	false
is-show-button-action If true, autocomplete will show button action.	boolean	false
is-group-suggestions If true, autocomplete suggestions list will showed up as group.	boolean	false
is-raw-value If true, value of autocomplete will be raw.	boolean	false
is-keep-alive If true, autocomplete will be hidden using CSS instead of destroying DOM.	boolean	true
is-adaptive-width If true, autocomplete content width will have min-width same as autocomplete input.	boolean	true

Data Prop

MpAutocomplete support two different data formats:

An array of strings, use when do not need to customize item component. An array of objects with required value properties and any other additional properties.

Array of string

<mp-autocomplete :data="['Option 1', 'Option 2', 'Option 3']" />

Array of object

<mp-autocomplete
  :data="[
    { value: 'Option 1', email: 'option1@mail.com' },
    { value: 'Option 2', email: 'option2@mail.com' },
    { value: 'Option 3', email: 'option3@mail.com' },
  ]"
/>

Usage

Customize

Custom label

Custom value

Infinity Scroll

Manual Filter

Button Action

Group Suggestions

Group Customized

Left Addon

Portal

Raw value

Controlled