ikun-uiKAutoComplete
Get some recommended tips based on the current input.
Install
bash
pnpm add @ikun-ui/auto-completebash
yarn add @ikun-ui/auto-completebash
npm install @ikun-ui/auto-completeBasic usage
Clearable
Make the AutoComplete clearable with the clearable attribute.
Custom Render
Through slots you can customize option rendering
AutoComplete Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | sm | md |lg | md | size of AutoComplete. |
| value | string | - | Binding value |
| disabled | boolean | false | Disable the AutoComplete |
| clearable | boolean | false | whether to show clear button |
| placeholder | string | false | AutoComplete's placeholder |
| append | string | - | The class name of the append button icon, following the unocss standard |
| prepend | string | - | The class name of the prepend button icon, following the unocss standard |
| triggerOnFocus | boolean | false | Triggered when mouse is focused. |
| fetchSuggestions | FetchSuggestionType | - | Enter suggestion callback method. |
| useCompositionInput | boolean | false | Bind value will be updated after the composition input ends |
| clsInput | string | '' | Additional class for input component |
| cls | string | '' | Additional class for component |
| attrs | any | {} | Additional attributes |
typescript
export type FetchSuggestionType = (
params: string | number,
cb: (res: AutoCompleteItems[]) => void
) => void;
export type AutoCompleteItems = {
[string]: any;
value: string | number;
};AutoComplete Events
| Name | Description | Type |
|---|---|---|
| updateValue | Triggered after selecting input suggestion | (value: string)=> void |
| enter | Event fired when enter is pressed | (e: Event)=> void |
| keydown | Event fired when keyboard is pressed | (e: Event)=> void |
| change | Event fired when the value is changes | (e: Event)=> void |
| compositionstart | The compositionstart event is fired when a text composition system | (e: CompositionEvent)=> void |
| compositionend | The compositionend event is fired when a text composition system | (e: CompositionEvent)=> void |
| compositionInput | Event fired when enable useCompositionInput | (e: CompositionEvent)=> void |
| triggerPrepend | Event fired on prepend button | (value: HTMLInputElement.value)=> void |
| triggerAppend | Event fired on append button | (value: HTMLInputElement.value)=> void |
| search | When search is true and you press enter or click the prepend button or click the append button, the event will be triggered. | (value: HTMLInputElement.value)=> void |
AutoComplete Slots
| Name | Description |
|---|---|
| default | Customize option content. |
| prefix | Customize AutoComplete prefix content |
| suffix | Customize AutoComplete suffix content |