AutoComplete
Auto-complete is an input field that helps the user with suggestions as they are typing their input. When a user starts typing, a list of selectable suggestions will appear, making it easier to get the input right and to understand the options.
Basic Usage
<triton-auto-complete
options="['any','options']"
></triton-auto-complete>
<TritonAutoComplete
options="['any','options']"
/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-auto-complete
options="['any','options']"
></triton-auto-complete>
</body>
</html>
TritonAutoComplete is an extension of the TritonInput Component, and inherits the input properties. This includes properties such as icons, required, label etc.
Behavior
When the user inputs characters into the AutoComplete, different options will appear. TritonAutoComplete has two different ways of creating the options, but both will look the same to the user.
AutoCompleteOption
The most common way to add options to TritonAutoComplete is by using the AutoCompleteOption
type.
In TypeScript, AutoCompleteOptions
are defined like this:
type AutoCompleteOption = {
key: string;
value: string | number;
label?: string;
options?: {
[args: string]: any;
}
}
<triton-auto-complete
label="Select airport using AutoCompleteOptions"
placeholder="Type airport in Norway"
options={[
{
key: 'OSL',
value: 'Oslo Lufthavn Gardemoen'
},
...
]}
></triton-auto-complete>
Array of Strings
When using TritonAutoComplete with vanilla JS, or a framework that does not support rich data as properties, options should be passed as a string array. This is simply done by adding an array of strings to the options property.
<triton-auto-complete
label="Select country as string"
placeholder="No country selected"
options='["Afghanistan","Albania", ... ,"Zambia","Zimbabwe" ]'
></triton-auto-complete>
Trigger After
This property sets after which amount of input characters the search fires. Note that the default for this is 1 (meaning that the search will fire when the 2nd character is entered).
<triton-auto-complete placeholder="Search will fire immediately" options="['any','options']" trigger-after="0"></triton-auto-complete>
<triton-auto-complete placeholder="Search will fire on the 3rd character" options="[''some','other', 'options']" trigger-after="2"></triton-auto-complete>
Custom Search Function
In some cases implementers will want to have a custom callback function to handle the search, instead of the default handling.
This can be acchieved by using the searchOptionsCallback
property.
The passed callback function will override the default options handling.
The function passed should return the list of options to display.
Note: this is an advanced feature
<triton-auto-complete searchOptionsCallback="customSearchCallback"></triton-auto-complete>
const customSearchCallback: AutoCompleteOptions = (searchTxt: string) => {
/* Your custom search logic here */
}
Playground
API
Properties
Property | Description | Type | Default |
---|---|---|---|
clear-input | If true, and the input has a value, a clear-button will appear. Clicking it clears the input field | boolean | true |
clear-on-edit | If true, the value will be cleared when the input gets focus. Defaults to true when type is password, otherwise, defaults to false | boolean | - |
disabled | If true, the component will look disabled and not be interactable | boolean | false |
error | If true the input element will be displayed as invalid | boolean | false |
error-text | Error text displayed at the bottom of the field, if error is true | string | - |
force-selection | If true and input value is not valid, the best match will be selected on blur if there exist some one or more matches in the visible list | boolean | false |
helper-text | A brief text for the user, at the bottom of the field | string | - |
icon-trailing | Display icon on the right side of the input | Icon | 'search' |
is-loading | Should be set to true if the component is loading | boolean | false |
label | The label displayed for the field | string | - |
name | The name of the control, which is submitted with the form data | string | - |
no-results-label | The string displayed if the search returns no options | string | Noresults |
options | Array of options to populate the auto copmlete result list | AutoCompleteOption[] string string[] | - |
placeholder | Instructional text that shows before the input has a value | string | - |
required | If true, the user must fill in a value before submitting a form | boolean | false |
result-limit | Max allowed items in the auto complete result list | number | 8 |
searchOptionsCallback | If callback function is set the default internal filtering of options will NOT happen.The callback function will be executed upon triggering of onInputChange eventand should return options that will be displayed | (searchTerm:string)=>Promise<string string[] AutoCompleteOption[]> | - |
trigger-after | Autocomplete will not trigger until more than the given amount of characters have been entered in the field | number | 1 |
value | The value of the input | string | '' |
Events
Name | Type | Description | Extra |
---|---|---|---|
atBlur | CustomEvent<void> | Emitted when the input loses focus. | - |
atChange | CustomEvent<InputValue> | Emitted when the value has changed. | - |
atFocus | CustomEvent<void> | Emitted when the input has focus. | - |
atInput | CustomEvent<KeyboardEvent> | Emitted when a keyboard input occurred | - |