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

SK.UI.Autocomplete events.

 

Examples

Initialize an advanced autocomplete list with tooltips.

var list = new SK.UI.Autocomplete.Advanced( document.body, {
   list: [
      {text: 'Home', title: 'About', value: 1}, 
      {text: 'About', title: 'Home', value: 2},  
      {text: 'Products', title: 'Products', value: 3}
   ]
});

 

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.

list.addOption({
   text: 'Contact Us',
   title: 'Contact Us',
   value: 4,
   inject_to: 2,
   position: 'after'
});

 

You can also add new sub-options to any existing one.

list.addOptions([
   {
      text: 'Product 1'
      value: 'prod1',
      inject_to: 3,
      position: 'bottom'
   },
   {
      text: 'Product 2',
      value: 'prod2',
      inject_to: 3,
      position: 'bottom'
   }
]);

 

Removing an option is easy. Just pass its value to the RemoveOption method.

list.RemoveOption('prod1');