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.

var search = new SK.UI.Autocomplete( document.body, {
   list: [
      {text: 'About', value: 1}, 
      {text: 'Home', value: 2}, 
      {text: 'Contacts', value: 3}, 
      {text: 'Products', value: 4}
   ],
   onFocus: function() {
   // searchbox is focused
   }
});