Overview
The SK.UI.Autocomplete.Advanced class extends SK.UI.Autocomoplete with advanced options and methods.
Include Resource Files
/Shared/UIComponents/Internal/LinkInterface/Autocomplete
/css/fat_autocomplete.css
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/LinkInterface/Autocomplete/css/fat_autocomplete.css">
/Scripts/fat_autocomplete.js
<script type="text/javascript" src="/Shared/UIComponents/Internal/LinkInterface/Autocomplete/Scripts/fat_autocomplete.js"></script>
The dependency files may already exist in the environment and you may not need to include them.
Constructor Parameters
Same as SK.UI.Autocomplete parameters.
Options
These extend the SK.UI.Autocomplete options.
Name | Description | Type | Default Value |
|---|---|---|---|
reset_on_select | Whether the searchbox state resets on option select. Unlike the SK.UI.Autocomplete class, here the default value is false. | Boolean | false |
value | The starting value of the searchbox. Useful if you wan't a defalt value, before the user interacts. | String | '' |
custom_scrollbar | Whether to apply a custom scrollbar to the dropdown list. | Boolean | true |
tooltip_classname | Allows you to specify a custom class for the list items tooltips. Define a tooltip text per item by setting a 'title' property in the element options. | String | 'sk-tips' |
max_height | The maximum height of the dropdown. It's value won't get higher in any case. | Integer | 600 |
min_height | The minimum height of the dropdown. It won't get shorter even if there are less list items to occupy the space. | Integer | 200 |
scroll_wrapper | If the UI is located in a scrollable container (css overflow:hidden), then you should define it as the scroll_wrapper. | DOM Element | window |
Methods
Name | Description | Parameters | Returns |
|---|---|---|---|
addOption | Adds new option (list item). Pass an option object, create it's DOM Elements and inject it to the list. By default this updates the elements collection, but you can skip this by passing false after the options object. | option (Object), flush_options (Boolean, true by default) | - |
addOptions | Add multiple options to the autocomplete list. | options (Array) | - |
removeOption | Remove an option (list item) by passing its the value. | value, flush_options (Boolean, true by default) | - |
removeOptions | Remove multiple options to the autocomplete list. | options (Array) | - |
clearField | Clears the searchbox and it's value. | - | - |
getSelectedOption | Returns the currently selected option's element. | - | DOM Element |
getSelectedOptionLabel | Returns the currently selected option's label. | - | String |
selectField | Select the text in the searchbox. | - | - |
clearOptionList | Remove all list options. | - | - |
New Option object
Whenever adding a new option to the dropdown via the addOption method, it will have the following properties by default.
Name | Description | Type | Default Value |
|---|---|---|---|
text | The option's label. | String | '' |
value | The option's value. | String | '' |
inject_to | The item relative to which the new list option will be injected. You would write that item's value here. If there is no value specified this will be the root list. This property works in conjunction with the position option. | String or Integer | '' |
position | The place to inject option element. Can be 'top', 'bottom', 'after', or 'before'. If it is 'before' or 'after' the new element will be injected next to the inject_to element. If it is 'top' or 'bottom' the new element will be injected inside the inject_to element as a sub-list item. | String | 'top' |
See the Examples for some use cases of adding a new list option.
Events
Examples
Initialize an advanced autocomplete list with tooltips.
You can add new options to the above list at any time. Here is how you can add a new option between About and Products.
You can also add new sub-options to any existing one.
Removing an option is easy. Just pass its value to the RemoveOption method.