# ef-autosuggest

Shows suggestions based on users' query.
It can be used by attaching to text form control
such as TextField, Multi Input, etc.
Autosuggest supports various use cases such as
custom rendering, pagination, asynchronous data request, etc.

## Properties

| Property         | Attribute          | Type                                         | Default             | Description                                      |
|------------------|--------------------|----------------------------------------------|---------------------|--------------------------------------------------|
| `attach`         | `attach`           | `AutosuggestTargetElement \| string \| null` | null                | Target element to be attached with Autosuggest   |
| `debounceRate`   | `debounce-rate`    | `number`                                     | "100"               | Debounce rate in ms of the filter as a number.<br />Used to throttle the filter rate so as not to trigger unneeded filtering |
| `highlightable`  |                    | `AutosuggestHighlightable`                   | "itemHighlightable" | A function that is applied to every suggestion during the render process<br />to say whether the item can be highlighted and selected. Only items that return true are considered.<br />By default the function checks for `item` `highlightable` property. |
| `htmlRenderer`   | `html-renderer`    | `boolean`                                    | false               | If set to true, the render function is not called. Instead the wrapper element<br />should populate and destroy suggestion elements. Rendering items manually<br />may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others) |
| `loading`        | `loading`          | `boolean`                                    | false               | If set to true show loading mask                 |
| `moreResults`    | `more-results`     | `boolean`                                    | false               | If set to true display 'Has more results' item   |
| `moreSearchText` | `more-search-text` | `string`                                     | ""                  | Custom text for 'More results', you can use {0} to represent current query.<br />For example, 'More results for {0}' |
| `opened`         | `opened`           | `boolean`                                    | false               | Auto suggest popup's open state                  |
| `query`          |                    | `AutosuggestQuery \| null`                   | null                | An object that represents a query from attach target |
| `renderer`       |                    | `AutosuggestRenderer`                        | "renderer"          | A renderer applied to suggestion.<br />By default a render maps data to item attributes |
| `requestOnFocus` | `request-on-focus` | `boolean`                                    | false               | Request suggestions when attach target is focused |
| `suggestions`    |                    | `AutosuggestItem[]`                          | []                  | A list of suggestion items                       |

## Methods

| Method               | Type                           | Description                                      |
|----------------------|--------------------------------|--------------------------------------------------|
| `onInputBlur`        | `(event: FocusEvent): void`    | Run when input has lost focus<br /><br />**event**: by default `blur` event is listened |
| `onInputFocus`       | `(event: FocusEvent): void`    | Run when input received focus<br /><br />**event**: by default `focus` event is listened |
| `onInputKeyDown`     | `(event: KeyboardEvent): void` | Run when input key down event has happened<br /><br />**event**: by default `keydown` event is listened |
| `onInputValueChange` | `(event: Event): void`         | Run when attach target value changes.<br /><br />**event**: by default `value-changed` event is listened |
| `refit`              | `(): void`                     | Set the width                                    |

## Events

| Event                         | Description                                      |
|-------------------------------|--------------------------------------------------|
| `add-attach-target-events`    | Fired when `attach` has been set to bind the control with any custom inputs. |
| `item-highlight`              | Fired when the user highlights an item or removes highlight from the item. |
| `item-select`                 | Fired when the user selects an item on autosuggest. |
| `remove-attach-target-events` | Fired when `attach` has been removed to unbind the control with the inputs. |
| `suggestions-changed`         | Fired when suggestion items changed.             |
| `suggestions-clear-requested` | Fired when autosuggest requests to clear the data. If used in reactive application, prevent default and set suggestions to []. |
| `suggestions-fetch-requested` | Fired when autosuggest requests the data. The event will be triggered when the value of the attached control has changed or when keyboard navigation is performed. |
| `suggestions-query`           | Fired when the user changes value in input control and you might need to update suggestion items accordingly. The event is not triggered if `query` property is changed programmatically. |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `footer` | Slot to add custom contents at the bottom of autosuggest popup |
| `header` | Slot to add custom contents at the top of autosuggest popup |