Chico UI

ch.AutoComplete (Class)

Documentation updated on Fri May 18 2012 12:47:07 GMT-0300 (GMT-03:00), generated by JsDoc Toolkit 2.4.0

Contents
1 Overview
2 Summary
3 Classdetail
4 Properties detail
5 Methods detail
6 Events detail

Overview

AutoComplete is a UI-Component.

Summary

Visibility Name Description
<protected>  
$content
Inner reference to content container.
<protected>  
$trigger
The input where the AutoComplete works.
<public>  
element
The element reference.
<protected>  
float
Reference to the Float component instanced.
<protected>  
populateContent
It has the items loaded.
<protected>  
selected
The number of the selected item.
<private>  
selectItem
Select an item.
<protected>  
suggestions
List of the shown suggestions.
<private>  
that
Reference to a internal component instance, saves all the information and configuration properties.
<public>  
type
The component's type.
<public>  
uid
The component's instance unique identifier.

Fields borrowed from class ch.Controls: createFloat

Fields borrowed from class ch.Uiobject: DOMParent,originalContent,position,staticContent

Visibility Name Description
<protected>  
configBehavior()
It gives the main behavior(focus, blur and turn off autocomplete attribute) to the $trigger.
<protected>  
doQuery()
It does the query to the server if configured an URL, or it does the query inside the array given.
<protected>  
hide()
Internal hide method.
<protected>  
loading()
It sets On/Off the loading icon.
<protected>  
show()
Internal show method.
<public>  
suggest()
Add suggestions to be shown.
<protected>  
suggestionsBehavior()
Binds the behavior related to the list.

Methods borrowed from class ch.Uiobject: content, prevent

Methods borrowed from class ch.Object: callbacks, off, on, once, trigger

Visibility Name Description
<public>  
ready
Triggers when the component is ready to use (Since 0.8.0).

Classdetail

Parameters

  • conf: Object, Optional. Object with configuration properties.
  • conf.url: String, Optional. The url pointing to the suggestions's service.
  • conf.message: String, Optional. It represent the text when no options are shown.
  • conf.suggestions: Array, Optional. The list of suggestions. Use it when you don't have server side suggestions service. Don't use conf.url with this option.

Returns

  • itself

Examples

// Create a new autoComplete with configuration.
var me = $(".example").autoComplete({
    "url": "http://site.com/mySuggestions?q=",
    "message": "Write..."
});

Properties detail

$content (protected, jQuery)

Inner reference to content container. Here is where the content will be added.

$trigger (protected, jQuery)

The input where the AutoComplete works.

element (public, HTMLElement)

The element reference.

float (protected, Object)

Reference to the Float component instanced.

populateContent (protected, Boolean)

It has the items loaded.

selected (protected, Number)

The number of the selected item.

selectItem (private, Function)

Select an item.

suggestions (protected, Array)

List of the shown suggestions.

that (private, object)

Reference to a internal component instance, saves all the information and configuration properties.

type (public, string)

The component's type.

uid (public, number)

The component's instance unique identifier.

Methods detail

configBehavior (protected)

It gives the main behavior(focus, blur and turn off autocomplete attribute) to the $trigger.

doQuery (protected)

It does the query to the server if configured an URL, or it does the query inside the array given.

hide (protected)

Internal hide method. It removes the behavior.

loading (protected)

It sets On/Off the loading icon.

show (protected)

Internal show method. It adds the behavior.

suggest (public)

Add suggestions to be shown.

Returns
  • itself

suggestionsBehavior (protected)

Binds the behavior related to the list.

Events detail

ready (public)

Triggers when the component is ready to use (Since 0.8.0).

Examples
// Following the first example, using 'me' as autoComplete's instance controller:
me.on("ready",function () {
	this.show();
});