Yahoo! UI Library

AutoComplete Widget  2.6.0

Yahoo! UI Library > autocomplete > YAHOO.widget.AutoComplete

Class YAHOO.widget.AutoComplete

The AutoComplete class provides the customizable functionality of a plug-and-play DHTML auto completion widget. Some key features:
  • Navigate with up/down arrow keys and/or mouse to pick a selection
  • The drop down container can "roll down" or "fly out" via configurable animation
  • UI look-and-feel customizable through CSS, including container attributes, borders, position, fonts, etc

Constructor

YAHOO.widget.AutoComplete ( elInput , elContainer , oDataSource , oConfigs )
Parameters:
elInput <HTMLElement> DOM element reference of an input field.
elInput <String> String ID of an input field.
elContainer <HTMLElement> DOM element reference of an existing DIV.
elContainer <String> String ID of an existing DIV.
oDataSource <YAHOO.widget.DataSource> DataSource instance.
oConfigs <Object> (optional) Object literal of configuration params.

Properties

allowBrowserAutocomplete - Boolean

Whether or not to allow browsers to cache user-typed input in the input field. Disabling this feature will prevent the widget from setting the autocomplete="off" on the input field. When autocomplete="off" and users click the back button after form submission, user-typed input can be prefilled by the browser from its cache. This caching of user input may not be desired for sensitive data, such as credit card numbers, in which case, implementers should consider setting allowBrowserAutocomplete to false.
Default Value: true

alwaysShowContainer - Boolean

Enabling this feature prevents the toggling of the container to a collapsed state. Setting to true does not automatically trigger the opening of the container. Implementers are advised to pre-load the container with an explicit "sendQuery()" call.
Default Value: false

animHoriz - Boolean

Whether or not to animate the expansion/collapse of the results container in the horizontal direction.
Default Value: false

animSpeed - Number

Speed of container expand/collapse animation, in seconds..
Default Value: 0.3

animVert - Boolean

Whether or not to animate the expansion/collapse of the results container in the vertical direction.
Default Value: true

applyLocalFilter - Boolean

By default, results from local DataSources will pass through the filterResults method to apply a client-side matching algorithm.
Default Value: true for local arrays and json, otherwise false

autoHighlight - Boolean

Whether or not the first item in results container should be automatically highlighted on expand.
Default Value: true

dataSource - YAHOO.widget.DataSource

The DataSource object that encapsulates the data used for auto completion. This object should be an inherited object from YAHOO.widget.DataSource.

delimChar - String | String[]

Query delimiter. A single character separator for multiple delimited selections. Multiple delimiter characteres may be defined as an array of strings. A null value or empty string indicates that query results cannot be delimited. This feature is not recommended if you need forceSelection to be true.

forceSelection - Boolean

Whether or not to force the user's selection to match one of the query results. Enabling this feature essentially transforms the input field into a <select> field. This feature is not recommended with delimiter character(s) defined.
Default Value: false

highlightClassName - String

Class name of a highlighted item within results container.
Default Value: "yui-ac-highlight"

maxResultsDisplayed - Number

Maximum number of results to display in results container.
Default Value: 10

minQueryLength - Number

Number of characters that must be entered before querying for results. A negative value effectively turns off the widget. A value of 0 allows queries of null or empty string values.
Default Value: 1

prehighlightClassName - String

Class name of a pre-highlighted item within results container.

queryDelay - Number

Number of seconds to delay before submitting a query request. If a query request is received before a previous one has completed its delay, the previous request is cancelled and the new request is set to the delay. If typeAhead is also enabled, this value must always be less than the typeAheadDelay in order to avoid certain race conditions.
Default Value: 0.2

queryInterval - Number

When IME usage is detected, AutoComplete will switch to querying the input value at the given interval rather than per key event.
Default Value: 500

queryMatchCase - Boolean

When applyLocalFilter is true, the local filtering algorthim can have case sensitivity enabled.
Default Value: false

queryMatchContains - Boolean

When applyLocalFilter is true, results can be locally filtered to return matching strings that "contain" the query string rather than simply "start with" the query string.
Default Value: false

queryMatchSubset - Boolean

Enables query subset matching. When the DataSource's cache is enabled and queryMatchSubset is true, substrings of queries will return matching cached results. For instance, if the first query is for "abc" susequent queries that start with "abc", like "abcd", will be queried against the cache, and not the live data source. Recommended only for DataSources that return comprehensive results for queries with very few characters.
Default Value: false

queryQuestionMark - Boolean

For XHR DataSources, AutoComplete will automatically insert a "?" between the server URI and the "query" param/value pair. To prevent this behavior, implementers should set this value to false. To more fully customize the query syntax, implementers should override the generateRequest() method.
Default Value: true

resultTypeList - Boolean

For backward compatibility to pre-2.6.0 formatResults() signatures, setting resultsTypeList to true will take each object literal result returned by DataSource and flatten into an array.
Default Value: true

supressInputUpdate - Boolean

Whether or not the input field should be updated with selections.
Default Value: false

typeAhead - Boolean

If autohighlight is enabled, whether or not the input field should be automatically updated with the first query result as the user types, auto-selecting the substring portion of the first result that the user has not yet typed.
Default Value: false

typeAheadDelay - Number

If typeAhead is true, number of seconds to delay before updating input with typeAhead value. In order to prevent certain race conditions, this value must always be greater than the queryDelay.
Default Value: 0.5

useIFrame - Boolean

Whether or not to use an iFrame to layer over Windows form elements in IE. Set to true only when the results container will be on top of a <select> field in IE and thus exposed to the IE z-index bug (i.e., 5.5 < IE < 7).
Default Value: false

useShadow - Boolean

Whether or not the results container should have a shadow.
Default Value: false

Methods

collapseContainer

void collapseContainer ( )
Collapses container.
Returns: void

destroy

void destroy ( )
Nulls out the entire AutoComplete instance and related objects, removes attached event listeners, and clears out DOM elements inside the container. After calling this method, the instance reference should be expliclitly nulled by implementer, as in myDataTable = null. Use with caution!
Returns: void

doBeforeExpandContainer

Boolean doBeforeExpandContainer ( elTextbox , elContainer , sQuery , aResults )
Overridable method called before container expands allows implementers to access data and DOM elements.
Parameters:
elTextbox <HTMLElement> The text input box.
elContainer <HTMLElement> The container element.
sQuery <String> The query string.
aResults <Object[]> An array of query results.
Returns: Boolean
Return true to continue expanding container, false to cancel the expand.

doBeforeLoadData

Boolean doBeforeLoadData ( sQuery , oResponse , oPayload )
Overridable method called before container is loaded with result data.
Parameters:
sQuery <String> Original request.
oResponse <Object> Response object.
oPayload <MIXED> (optional) Additional argument(s)
Returns: Boolean
Return true to continue loading data, false to cancel.

filterResults

Object filterResults ( sQuery , oFullResponse , oParsedResponse , oCallback )
Executed by DataSource (within DataSource scope via doBeforeCallback()) to filter results through a simple client-side matching algorithm.
Parameters:
sQuery <String> Original request.
oFullResponse <Object> Full response object.
oParsedResponse <Object> Parsed response object.
oCallback <Object> Callback object.
Returns: Object
Filtered response object.

formatResult

String formatResult ( oResultData , sQuery , sResultMatch )
Overridable method that returns HTML markup for one result to be populated as innerHTML of an <LI> element.
Parameters:
oResultData <Object> Result data object.
sQuery <String> The corresponding query string.
sResultMatch <HTMLElement> The current query string.
Returns: String
HTML markup of formatted result data.

generateRequest

void generateRequest ( sQuery )
A function that converts an AutoComplete query into a request value which is then passed to the DataSource's sendRequest method in order to retrieve data for the query. By default, returns a String with the syntax: "query={query}" Implementers can customize this method for custom request syntaxes.
Parameters:
sQuery <String> Query string
Returns: void

getContainerEl

HTMLELement getContainerEl ( )
Returns DOM reference to container element.
Returns: HTMLELement
DOM reference to container element.

getInputEl

HTMLELement getInputEl ( )
Returns DOM reference to input element.
Returns: HTMLELement
DOM reference to input element.

getListEl

HTMLElement[] getListEl ( )
Public accessor to the <ul> element that displays query results within the results container.
Returns: HTMLElement[]
Reference to <ul> element within the results container.

getListItemData

Object getListItemData ( elListItem )
Public accessor to the result data associated with a given <li> result.
Parameters:
elListItem <HTMLElement> Reference to <LI> element.
Returns: Object
Result data.

getListItemIndex

Number getListItemIndex ( elListItem )
Public accessor to the index of the associated with a given <li> result.
Parameters:
elListItem <HTMLElement> Reference to <LI> element.
Returns: Number
Index.

getListItemMatch

String getListItemMatch ( elListItem )
Public accessor to the matching string associated with a given <li> result.
Parameters:
elListItem <HTMLElement> Reference to <LI> element.
Returns: String
Matching string.

getSubsetMatches

Object getSubsetMatches ( sQuery )
Handles subset matching for when queryMatchSubset is enabled.
Parameters:
sQuery <String> Query string.
Returns: Object
oParsedResponse or null.

handleResponse

void handleResponse ( sQuery , oResponse , oPayload )
Handles response for display. This is the callback function method passed to YAHOO.util.DataSourceBase#sendRequest so results from the DataSource are returned to the AutoComplete instance.
Parameters:
sQuery <String> Original request.
oResponse <Object> Response object.
oPayload <MIXED> (optional) Additional argument(s)
Returns: void

isContainerOpen

Boolean isContainerOpen ( )
Returns true if container is in an expanded state, false otherwise.
Returns: Boolean
Returns true if container is in an expanded state, false otherwise.

isFocused

Boolean isFocused ( )
Returns true if widget instance is currently focused.
Returns: Boolean
Returns true if widget instance is currently focused.

preparseRawResponse

Object preparseRawResponse ( sQuery )
Executed by DataSource (within DataSource scope via doBeforeParseData()) to handle responseStripAfter cleanup.
Parameters:
sQuery <String> Query string.
Returns: Object
oParsedResponse or null.

sendQuery

void sendQuery ( sQuery )
Makes query request to the DataSource.
Parameters:
sQuery <String> Query string.
Returns: void

setBody

void setBody ( sBody )
Sets HTML markup for the results container body. This markup will be inserted within a <div> tag with a class of "yui-ac-bd".
Parameters:
sBody <String> HTML markup for results container body.
Returns: void

setFooter

void setFooter ( sFooter )
Sets HTML markup for the results container footer. This markup will be inserted within a <div> tag with a class of "yui-ac-ft".
Parameters:
sFooter <String> HTML markup for results container footer.
Returns: void

setHeader

void setHeader ( sHeader )
Sets HTML markup for the results container header. This markup will be inserted within a <div> tag with a class of "yui-ac-hd".
Parameters:
sHeader <String> HTML markup for results container header.
Returns: void

toString

String toString ( )
Public accessor to the unique name of the AutoComplete instance.
Returns: String
Unique name of the AutoComplete instance.

Events

containerCollapseEvent

containerCollapseEvent ( oSelf )
Fired when the results container is collapsed.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.

containerExpandEvent

containerExpandEvent ( oSelf , sQuery , aResults )
Fired when the results container is expanded.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
sQuery <String> The query string.
aResults <Object[]> Results array.

containerPopulateEvent

containerPopulateEvent ( oSelf )
Fired when the results container is populated.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.

dataErrorEvent

dataErrorEvent ( oSelf , sQuery )
Fired when the AutoComplete instance does not receive query results from the DataSource due to an error.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
sQuery <String> The query string.

dataRequestEvent

dataRequestEvent ( oSelf , sQuery , oRequest )
Fired when the AutoComplete instance makes a request to the DataSource.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
sQuery <String> The query string.
oRequest <Object> The request.

dataReturnEvent

dataReturnEvent ( oSelf , sQuery , aResults )
Fired when the AutoComplete instance receives query results from the data source.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
sQuery <String> The query string.
aResults <Object[]> Results array.

itemArrowFromEvent

itemArrowFromEvent ( oSelf , elItem )
Fired when result item has been arrowed away from.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
elItem <HTMLElement> The <li> element item arrowed from.

itemArrowToEvent

itemArrowToEvent ( oSelf , elItem )
Fired when result item has been arrowed to.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
elItem <HTMLElement> The <li> element item arrowed to.

itemMouseOutEvent

itemMouseOutEvent ( oSelf , elItem )
Fired when result item has been moused out.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
elItem <HTMLElement> The <li> element item moused from.

itemMouseOverEvent

itemMouseOverEvent ( oSelf , elItem )
Fired when result item has been moused over.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
elItem <HTMLElement> The <li> element item moused to.

itemSelectEvent

itemSelectEvent ( oSelf , elItem , oData )
Fired when an item is selected via mouse click, ENTER key, or TAB key.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
elItem <HTMLElement> The selected <li> element item.
oData <Object> The data returned for the item, either as an object, or mapped from the schema into an array.

selectionEnforceEvent

selectionEnforceEvent ( oSelf )
Fired if forceSelection is enabled and the user's input has been cleared because it did not match one of the returned query results.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.

textboxBlurEvent

textboxBlurEvent ( oSelf )
Fired when the input field loses focus.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.

textboxChangeEvent

textboxChangeEvent ( oSelf )
Fired when the input field value has changed when it loses focus.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.

textboxFocusEvent

textboxFocusEvent ( oSelf )
Fired when the input field receives focus.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.

textboxKeyEvent

textboxKeyEvent ( oSelf , nKeycode )
Fired when the input field receives key input.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
nKeycode <Number> The keycode number.

typeAheadEvent

typeAheadEvent ( oSelf , sQuery , sPrefill )
Fired when the input field has been prefilled by the type-ahead feature.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
sQuery <String> The query string.
sPrefill <String> The prefill string.

unmatchedItemSelectEvent

unmatchedItemSelectEvent ( oSelf , sSelection )
Fired when a user selection does not match any of the displayed result items.
Parameters:
oSelf <YAHOO.widget.AutoComplete> The AutoComplete instance.
sSelection <String> The selected string.


Copyright © 2008 Yahoo! Inc. All rights reserved.