Overview
The SK.UI.Autocomplete class creates searchboxes with autocomplete dropdowns and handles their behavior. It extends SK.UI.SearchBox. The constructor returns the instance object.
Include Resource Files
/Shared/UIComponents/Internal/LinkInterface/Searchbox
css/ui_searchbox.css
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/LinkInterface/Searchbox/css/ui_searchbox.css">Scripts/ui_searchbox.js
<script type="text/javascript" src="/Shared/UIComponents/Internal/LinkInterface/Searchbox/Scripts/ui_searchbox.js"></script>
/Shared/UIComponents/Internal/LinkInterface/Autocomplete
css/ui_autocomplete.css
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/LinkInterface/Autocomplete/Scripts/ui_autocomplete.css">Scripts/ui_autocomplete.js
<script type="text/javascript" src="/Shared/UIComponents/Internal/LinkInterface/Autocomplete/Scripts/ui_autocomplete.js"></script>
The dependency files may already exist in the environment and you may not need to include them.
Constructor Parameters
Name | Description | Type |
|---|---|---|
placeholder | The element where the searchbox will be injected. | DOM Element or ID String |
options | The autocomplete options. | Object |
Options
Name | Description | Type | Default Value |
|---|---|---|---|
list | The list of items that participate in the autocomplete. | Array of Objects | [] |
class | Custom class for the searchbox wrapper. | String | '' |
reset_on_select | Whether the searchbox state resets on option select. | Boolean | true |
List Items
Each item in the autocomplete list is represented by an object in the list option. These object have the following mandatory properties.
Name | Description | Type |
|---|---|---|
text | The option's label. | String |
value | The option's value that gets passed when this option is selected. | String |
Methods
Name | Description | Parameters | Returns |
|---|---|---|---|
getDropdown | Returns the dropdown container. | - | DOM Element |
showDropdown | Shows the dropdown list. If the searchbox is not empty the list will show filtered results. | - | - |
hideDropdown | Hides the dropdown list. | - | - |
isDropdownVisible | Checks if dropdown list is shown or not. | - | Boolean |
getElementByLabel | Pass an option's label and return the related list item element. | label (String) | DOM Element |
getElementByValue | Pass an option's value and return the related list item element. | value (String) | DOM Element |
selectByLabel | Select an element as the currently active one by passing its label. | label (String) | Boolean |
selectByValue | Select an element as the currently active one by passing its value. | value (String) | Boolean |
getCurrent | Get the currently selected list element. | DOM Element | - |
destroy | Remove the DOM Element, but leave the instance. | - | - |
getValue | Returns the current value of the searchbox. | - | - |
setValue | Sets the current value of the searchbox. | value | - |
Events
Name | Description | Arguments |
|---|---|---|
focus | Triggers on focusing the searchbox. | - |
blur | Triggers on the searchbox loosing focus. | - |
keydown | Triggers on pressing down a key while typing in the searchbox. | - |
keyup | Triggers on releasing a key while typing in the searchbox. | - |
mouseenter | Triggers on the mouse entering the searchbox. | - |
mouseleave | Triggers on the mouse leaving the searchbox. | - |
beforeListFiltered | Triggers on executing the filterList method. | - |
afterListFiltered | Triggers at the end of the filterList method. | - |
Examples
Initializing a simple autocomplete searchbox and attach an event.