Autocomplete

<k-autocomplete>

kirby/panel/src/components/Forms/Autocomplete.vue

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

The Autocomplete component can be wrapped around any form of input to get an flexible starting point to provide an real-time autocomplete dropdown. We use it for our TagsInput component.

Props

Prop	Type	Default	Description
html	`boolean`	false	If set to `true`, the text of the options is rendered as HTML
limit	`number`	10	Maximum number of displayed results
options	`array`	–	Options for the autocomplete dropdown must be passed as an array of objects. Each object can have as many items as you like, but a text item is required to match agains the query Example: `[ { text: "this will be searched", id: "anything else is optional" }, ];`
query	`string`	–	Term to filter options
skip	`array`	[]	You can pass an array of strings, which should be ignored in the search.

Methods

Method	Parameters	Description
search	`string` query search term	Opens the dropdown and filters the options

Events

Event	Description	Passes
search	Search has been performed	`string` query `array` matches all options that match the search query
select	New value has been selected	`object` item option item

Slots

Slot	Description
default	Use to insert your input

Example

<template>
  <k-autocomplete ref="autocomplete" :options="options" @select="select">
    <input type="text" @input="$refs.autocomplete.search($event.target.value)" />
  </k-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {value: "a", text: "Option A"},
        {value: "b", text: "Option B"},
        {value: "c", text: "Option C"},
      ]
    }
  },
  methods: {
    select(item) {
      console.log(item);
    }
  }
}
</script>

CSS classes

.k-autocomplete