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
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
});
});