Skip to content

Kirby 3.9.8

Autocomplete

<k-autocomplete>

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