Documentation

AutoComplete

Ajax with pagination

Show Code
<ks-autocomplete
    selection-key="name"
    v-model="value1"
    @search="runSearch"
    :paginated="true"
    empty-message="Nothing found"
></ks-autocomplete>

Passed items

Show Code
<ks-autocomplete
    :items="countries"
    selection-key="name"
    v-model="value2"
></ks-autocomplete>

Multiple Selections with custom template

Show Code
<ks-autocomplete
    :items="countries"
    selection-key="name"
    :multiple="true"
    v-model="value3"
    @search="runSearch"
>
    <template v-slot="props">
        <strong>{{props.item.name}}</strong> <em>{{props.item.code}}</em>
    </template>
</ks-autocomplete>

Multiple Selections with taggable (add new, minSearch of 0)

Show Code
<ks-autocomplete
    :min-search="0"
    :taggable="true"
    selection-key="name"
    v-model="value4"\
    :paginated="true"
    :show-tag-in-list="true"
    @search="runSearch"
>
    <template v-slot="props">
        <strong>{{props.item.name}}</strong> <em>{{props.item.code}}</em>
    </template>
</ks-autocomplete>

Grouped options, Multiple Selections with taggable (add new, minSearch of 0)

Show Code
<ks-autocomplete
    :min-search="0"
    :taggable="true"
    selection-key="name"
    v-model="value5"
    :paginated="true"
    :show-tag-in-list="true"
    :items="characters"
    group-by="show"
></ks-autocomplete>

With `label` slot

Show Code
<ks-autocomplete
selection-key="name"
:items="countries"
v-model="value6"
:multiple="true"
>
  <template v-slot:label="{item}">
    {{item.code}}
  </template>
</ks-autocomplete>

Props
Events
Methods
Slots

Name	Type	Default	Description
value v-model	String, Number	NULL	This is the prop that the v-model will bind to. So if you are using v-model you can omit this.
items	Array	NULL	This is the list of options. [{Option data...},{Option data...}]
placeholder	String	Select...	The placeholder in the select when nothing is selected.
minSearch	Number	0	Minimum number of characters typed in the search box needed to trigger the search
multiple	Boolean	false	Whether or not to support multiple selections
taggable	Boolean	false	When true the user is allowed to enter values not in the list items.
groupBy	String	NULL	The key to group items by. Dot notation is supported for nested values in the items.
showTagInList	Boolean	false	Depends on taggable. When true the taggable will be shown in the list as "Add {term}"
delay	Number	100	The amount of delay to be used when searching
searchThreshold	Number	7	The minimum number of items for the search input to be shown.
keepTextOnDelete	Boolean	false	When set to true if a user deletes a selection it will retain the text of the selection
itemFilter	Function, String	selectionKey	When a function is provided it will be used when filtering results from the search box. The function should accept the item as a parameter and should return true for a match. If a String is provided it is used as the key to filter on when filtering items.
selectionKey	String	name	This is the key used as the value for the items. And it is used to display selections
listHeight	String	250px	The height of the drop down list
cacheResults	Boolean	true	Whether or not to cache search results.
paginated	Boolean	false	Whether or not the search data is being paginated. When true the select will emit the search event when the list is navigated to the end.
paginateThreshold	Number	3	Determines when the paginate request will be called. So when the user scrolls down the list if this is set to 3 the request will be made when the user is 3 list items away from the bottom of the list.
stopParentScroll	Boolean	true	When set to true the list will automatically prevent the parent container from scrolling when the list scroll has reached the bottom.
emptyMessage	String		A message to use when the select is empty. (ex: "No Results"). If left blank then no message will show up.
acceptEmptySelection	Boolean	false	Works with the emptyMessage property. If this is set to true the empty option will be a selectable item instead of just text.