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