Version: 5.1.0

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	-

AutoComplete

Basic Usage​

Behavior​

AutoCompleteOption​

Array of Strings​

Trigger After​

Custom Search Function​

Playground​

API​

Properties​

Events​