ch.Autocomplete

Description

Autocomplete Component shows a list of suggestions for a HTMLInputElement.

How-to

// Create a new AutoComplete.
var autocomplete = new AutoComplete([el], [options]);

// Create a new AutoComplete with configuration.
var autocomplete = new AutoComplete('.my-autocomplete', {
 'loadingClass': 'custom-loading',
 'highlightedClass': 'custom-highlighted',
 'itemClass': 'custom-item',
 'addClass': 'carousel-cities',
 'keystrokesTime': 600,
 'html': true,
 'side': 'center',
 'align': 'center',
 'offsetX': 0,
 'offsetY': 0,
 'positioned': 'fixed'
});

Parameters

• el - HTMLElement : A HTMLElement to create an instance of ch.Autocomplete.
• options - Object : Options to customize an instance.
  • loadingClass - String : Default: "ch-autocomplete-loading".
  • highlightedClass - String : Default: "ch-autocomplete-highlighted".
  • itemClass - String : Default: "ch-autocomplete-item".
  • addClass - String : CSS class names that will be added to the container on the component initialization. Default: "ch-box-lite ch-autocomplete".
  • keystrokesTime - Number : Default: 150.
  • html - Boolean : Default: false.
  • side - String : The side option where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "bottom".
  • align - String : The align options where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "left".
  • offsetX - Number : The offsetX option specifies a distance to displace the target horitontally.
  • offsetY - Number : The offsetY option specifies a distance to displace the target vertically.
  • positioned - String : The positioned option specifies the type of positioning used. You must use: "absolute" or "fixed". Default: "absolute".
  • wrapper - Boolean | String : Wrap the reference element and place the container into it instead of body. When value is a string it will be applied as additional wrapper class. Default: false.

Extends

• ch.Component

Properties

.Component#name String

The name of a component.

.container HTMLDivElement

The autocomplete container.

// Gets the autocomplete container to append or prepend content.
autocomplete.container.appendChild(document.createElement('div'));

.trigger HTMLElement

The autocomplete trigger.

.uid Number

A unique id to identify the instance of a component.

Methods

.constructor()

Returns a reference to the constructor function.

.destroy()

Destroys an Autocomplete instance.

// Destroying an instance of Autocomplete.
autocomplete.destroy();

.hide() → {autocomplete}

Hides component's container.

// Hides the autocomplete.
autocomplete.hide();

.isShown() → {Boolean}

Returns a Boolean if the component's core behavior is shown. That means it will return 'true' if the component is on and it will return false otherwise.

// Execute a function if the component is shown.
if (autocomplete.isShown()) {
    fn();
}

.suggest() → {autocomplete}

Add suggestions to be shown.

// The suggest method needs an Array of strings to work with default configuration
autocomplete.suggest(['Aruba','Armenia','Argentina']);

// To work with html configuration, it needs an Array of strings. Each string must to be as you wish you watch it
autocomplete.suggest([
 '<strong>Ar</strong>uba <i class="flag-aruba"></i>',
 '<strong>Ar</strong>menia <i class="flag-armenia"></i>',
 '<strong>Ar</strong>gentina <i class="flag-argentina"></i>'
]);

.constructor()

Returns a reference to the constructor function.

.destroy()

Destroys an instance of Component and remove its data from asociated element.

// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;

.disable() → {component}

Disables an instance of Component.

// Disabling an instance of Component.
component.disable();

.enable() → {component}

Enables an instance of Component.

// Enabling an instance of Component.
component.enable();

.require() → {component}

Adds functionality or abilities from other classes.

// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');

Events

'destroy'

Emits when a component is destroyed.

// Subscribe to "destroy" event.
component.on('destroy', function () {
    // Some code here!
});

'disable'

Emits when a component is disable.

// Subscribe to "disable" event.
component.on('disable', function () {
    // Some code here!
});

'enable'

Emits when a component is enabled.

// Subscribe to "enable" event.
component.on('enable', function () {
    // Some code here!
});

'hide'

Event emitted when the Autocomplete container is hidden.

// Subscribe to "hide" event.
autocomplete.on('hide', function () {
 // Some code here!
});

'ready'

Event emitted when the component is ready to use.

// Subscribe to "ready" event.
autocomplete.on('ready',function () {
    // Some code here!
});

'select'

Event emitted when a suggestion is selected.

// Subscribe to "select" event.
autocomplete.on('select', function () {
    // Some code here!
});

'type'

Event emitted when the user is typing.

// Subscribe to "type" event with ajax call
autocomplete.on('type', function (userInput) {
     $.ajax({
         'url': '/countries?q=' + userInput,
         'dataType': 'json',
         'success': function (response) {
             autocomplete.suggest(response);
         }
     });
});

// Subscribe to "type" event with jsonp
autocomplete.on('type', function (userInput) {
      $.ajax({
          'url': '/countries?q='+ userInput +'&callback=parseResults',
          'dataType': 'jsonp',
          'cache': false,
          'global': true,
          'context': window,
          'jsonp': 'parseResults',
          'crossDomain': true
      });
});