# Yahoo! UI Library

### AutoComplete Widget

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 <Object>` Instance of YAHOO.widget.DataSource for query/results.
  `oConfigs <Object>` (optional) Object literal of configuration params.

### Properties

#### _aListItems `- private Array`

Array of <li> elements references that contain query results within the results container.

#### _bContainerOpen `- private Boolean`

Whether or not the results container is currently open.

#### _bFocused `- private Boolean`

Whether or not the input field is currently in focus. If query results come back but the user has already moved on, do not proceed with auto complete behavior.

#### _bItemSelected `- private Boolean`

Whether or not an item has been selected since the container was populated with results. Reset to false by _populateList, and set to true when item is selected.

#### _bOverContainer `- private Boolean`

Whether or not the mouse is currently over the results container. This is necessary in order to prevent clicks on container items from being text input field blur events.

#### _iFrameSrc `- private String`

Src to iFrame used when useIFrame = true. Supports implementations over SSL as well.

#### _maxResultsDisplayed `- private Number`

Internal count of <li> elements displayed and hidden in results container.

#### _nDelayID `- private Number`

Delay timeout ID.

#### _nDisplayedItems `- private Number`

Number of <li> elements currently displayed in results container.

#### _nIndex `- private Number`

Internal class variable to index multiple AutoComplete instances.
Default Value: 0

#### _nKeyCode `- private Number`

Key code of the last key pressed in textbox.

#### _oAnim `- private Boolean`

Animation instance for container expand/collapse.

#### _oContainer `- private HTMLElement`

Container DOM element.

#### _oCurItem `- private HTMLElement`

Pointer to the currently highlighted <li> element in the container.

#### _oTextbox `- private HTMLElement`

Text input field DOM element.

#### _queryInterval `- private Object`

For users typing via certain IMEs, queries must be triggered by intervals, since key events yet supported across all browsers for all IMEs.

#### _sCurQuery `- private String`

Current query string

#### _sName `- private String`

Name of AutoComplete instance.

#### _sSavedQuery `- private String`

Past queries this session (for saving delimited queries).

#### 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`

Whether or not the results container should always be displayed. Enabling this feature displays the container when the widget is instantiated and prevents the toggling of the container to a collapsed state.
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

#### autoHighlight `- Boolean`

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

#### dataSource `- Object`

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

#### highlighClassName `- 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.
Default Value: 0.5

#### typeAhead `- Boolean`

Whether or not the input field should be automatically updated with the first query result as the user types, auto-selecting the substring that the user has not typed.
Default Value: false

#### 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

#### __initProps

`private void __initProps ( )`
Updates and validates latest public config properties.

Returns: `void`

#### _cancelIntervalDetection

`private void _cancelIntervalDetection ( oSelf )`
Cancels text input detection by intervals.

Parameters:
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _clearSelection

`private void _clearSelection ( )`
When forceSelection is true and the user attempts leave the text input box without selecting an item from the query results, the user selection is cleared.

Returns: `void`

#### _enableIntervalDetection

`private void _enableIntervalDetection ( )`
Enables query triggers based on text input detection by intervals (rather than by key events).

Returns: `void`

#### _initContainer

`private void _initContainer ( )`
Initializes the results container once at object creation

Returns: `void`

#### _initContainerHelpers

`private void _initContainerHelpers ( )`
Initializes the results container helpers if they are enabled and do not exist

Returns: `void`

#### _initList

`private void _initList ( )`
Clears out contents of container body and creates up to YAHOO.widget.AutoComplete#maxResultsDisplayed <li> elements in an <ul> element.

Returns: `void`

#### _initListItem

`private void _initListItem ( oItem , nItemIndex )`
Initializes each <li> element in the container list.

Parameters:
  `oItem <HTMLElement>` The <li> DOM element.
  `nItemIndex <Number>` The index of the element.

Returns: `void`

#### _isIgnoreKey

`private Boolean _isIgnoreKey ( nKeycode )`
Whether or not key is functional or should be ignored. Note that the right arrow key is NOT an ignored key since it triggers queries for certain intl charsets.

Parameters:
  `nKeycode <Number>` Code of key pressed.

Returns: `Boolean`
  True if key should be ignored, false otherwise.

#### _jumpSelection

`private void _jumpSelection ( )`
For values updated by type-ahead, the right arrow key jumps to the end of the textbox, otherwise the container is closed.

Returns: `void`

#### _moveSelection

`private void _moveSelection ( nKeyCode )`
Triggered by up and down arrow keys, changes the current highlighted <li> element item. Scrolls container if necessary.

Parameters:
  `nKeyCode <Number>` Code of key pressed.

Returns: `void`

#### _onContainerMouseout

`private void _onContainerMouseout ( v , oSelf )`
Handles container mouseout events.

Parameters:
  `v <HTMLEvent>` The mouseout event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onContainerMouseover

`private void _onContainerMouseover ( v , oSelf )`
Handles container mouseover events.

Parameters:
  `v <HTMLEvent>` The mouseover event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onContainerResize

`private void _onContainerResize ( v , oSelf )`
Handles container resize events.

Parameters:
  `v <HTMLEvent>` The resize event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onContainerScroll

`private void _onContainerScroll ( v , oSelf )`
Handles container scroll events.

Parameters:
  `v <HTMLEvent>` The scroll event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onFormSubmit

`private void _onFormSubmit ( v , oSelf )`
Handles form submission event.

Parameters:
  `v <HTMLEvent>` The submit event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onIMEDetected

`private void _onIMEDetected ( oSelf )`
Enables interval detection for Korean IME support.

Parameters:
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onItemMouseclick

`private void _onItemMouseclick ( v , oSelf )`
Handles <li> element click events in the container.

Parameters:
  `v <HTMLEvent>` The click event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onItemMouseout

`private void _onItemMouseout ( v , oSelf )`
Handles <li> element mouseout events in the container.

Parameters:
  `v <HTMLEvent>` The mouseout event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onItemMouseover

`private void _onItemMouseover ( v , oSelf )`
Handles <li> element mouseover events in the container.

Parameters:
  `v <HTMLEvent>` The mouseover event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onTextboxBlur

`private void _onTextboxBlur ( v , oSelf )`
Handles text input box losing focus.

Parameters:
  `v <HTMLEvent>` The focus event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onTextboxFocus

`private void _onTextboxFocus ( v , oSelf )`
Handles text input box receiving focus.

Parameters:
  `v <HTMLEvent>` The focus event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onTextboxKeyDown

`private void _onTextboxKeyDown ( v , oSelf )`
Handles textbox keydown events of functional keys, mainly for UI behavior.

Parameters:
  `v <HTMLEvent>` The keydown event.
  `oSelf <object>` The AutoComplete instance.

Returns: `void`

#### _onTextboxKeyPress

`private void _onTextboxKeyPress ( v , oSelf )`
Handles textbox keypress events.

Parameters:
  `v <HTMLEvent>` The keypress event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _onTextboxKeyUp

`private void _onTextboxKeyUp ( v , oSelf )`
Handles textbox keyup events that trigger queries.

Parameters:
  `v <HTMLEvent>` The keyup event.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _populateList

`private void _populateList ( sQuery , aResults , oSelf )`
Populates the array of <li> elements in the container with query results. This method is passed to YAHOO.widget.DataSource#getResults as a callback function so results from the DataSource instance are returned to the AutoComplete instance.

Parameters:
  `sQuery <String>` The query string.
  `aResults <Array>` An array of query result objects from the DataSource.
  `oSelf <Object>` The AutoComplete instance.

Returns: `void`

#### _selectItem

`private void _selectItem ( oItem )`
Selects a result item from the container

Parameters:
  `oItem <HTMLElement>` The selected <li> element item.

Returns: `void`

#### _selectText

`private void _selectText ( oTextbox , nStart , nEnd )`
Selects text in the input field.

Parameters:
  `oTextbox <HTMLElement>` Text input box element in which to select text.
  `nStart <Number>` Starting index of text string to select.
  `nEnd <Number>` Ending index of text selection.

Returns: `void`

#### _sendQuery

`private void _sendQuery ( sQuery )`
Makes query request to the DataSource.

Parameters:
  `sQuery <String>` Query string.

Returns: `void`

#### _textMatchesOption

`private Boolean _textMatchesOption ( )`
Whether or not user-typed value in the text input box matches any of the query results.

Returns: `Boolean`
  True if user-input text matches a result, false otherwise.

#### _toggleContainer

`private void _toggleContainer ( bShow )`
Animates expansion or collapse of the container.

Parameters:
  `bShow <Boolean>` True if container should be expanded, false if container should be collapsed

Returns: `void`

#### _toggleContainerHelpers

`private void _toggleContainerHelpers ( bShow )`
Syncs results container with its helpers.

Parameters:
  `bShow <Boolean>` True if container is expanded, false if collapsed

Returns: `void`

#### _toggleHighlight

`private void _toggleHighlight ( oNewItem , sType )`
Toggles the highlight on or off for an item in the container, and also cleans up highlighting of any previous item.

Parameters:
  `oNewItem <HTMLElement>` The <li> element item to receive highlight behavior.
  `sType <String>` Type "mouseover" will toggle highlight on, and "mouseout" will toggle highlight off.

Returns: `void`

#### _togglePrehighlight

`private void _togglePrehighlight ( oNewItem , sType )`
Toggles the pre-highlight on or off for an item in the container.

Parameters:
  `oNewItem <HTMLElement>` The <li> element item to receive highlight behavior.
  `sType <String>` Type "mouseover" will toggle highlight on, and "mouseout" will toggle highlight off.

Returns: `void`

#### _typeAhead

`private void _typeAhead ( oItem , sQuery )`
Updates in the text input box with the first query result as the user types, selecting the substring that the user has not typed.

Parameters:
  `oItem <HTMLElement>` The <li> element item whose data populates the input field.
  `sQuery <String>` Query string.

Returns: `void`

#### _updateValue

`private void _updateValue ( oItem )`
Updates the text input box value with selected query result. If a delimiter has been defined, then the value gets appended with the delimiter.

Parameters:
  `oItem <HTMLElement>` The <li> element item with which to update the value.

Returns: `void`

#### doBeforeExpandContainer

`Boolean doBeforeExpandContainer ( )`
Overridable method called before container expands allows implementers to access data and DOM elements.

Returns: `Boolean`
  Return true to continue expanding container, false to cancel the expand.

#### formatResult

`String formatResult ( oResultItem , sQuery )`
Overridable method that converts a result item object into HTML markup for display. Return data values are accessible via the oResultItem object, and the key return value will always be oResultItem[0]. Markup will be displayed within <li> element tags in the container.

Parameters:
  `oResultItem <Object>` Result item representing one query result. Data is held in an array.
  `sQuery <String>` The current query string.

Returns: `String`
  HTML markup of formatted result data.

#### getListItemData

`Object | Array getListItemData ( )`
Public accessor to the data held in an <li> element of the results container.

Returns: `Object | Array`
  Object or array of result data or null

#### getListItems

`HTMLElement[] getListItems ( )`
Public accessor to the internal array of DOM <li> elements that display query results within the results container.

Returns: `HTMLElement[]`
  Array of <li> elements within the results container.

#### 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.

#### sendQuery

`void sendQuery ( sQuery )`
Makes query request to the DataSource.

Parameters:
  `sQuery <String>` Query string.

Returns: `void`

#### setBody

`void setBody ( sHeader )`
Sets HTML markup for the results container body. This markup will be inserted within a <div> tag with a class of "ac_bd".

Parameters:
  `sHeader <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 "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 "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

#### _sLastTextboxValue

`private _sLastTextboxValue ( )`
Internal tracker to last known textbox value, used to determine whether or not to trigger a query via interval for certain IME users.

#### containerCollapseEvent

`containerCollapseEvent ( oSelf )`
Fired when the results container is collapsed.

Parameters:
  `oSelf <Object>` The AutoComplete instance.

#### containerExpandEvent

`containerExpandEvent ( oSelf )`
Fired when the results container is expanded.

Parameters:
  `oSelf <Object>` 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 <Object>` The AutoComplete instance.
  `sQuery <String>` The query string.

#### dataRequestEvent

`dataRequestEvent ( oSelf , sQuery )`
Fired when the AutoComplete instance makes a query to the DataSource.

Parameters:
  `oSelf <Object>` The AutoComplete instance.
  `sQuery <String>` The query string.

#### dataReturnEvent

`dataReturnEvent ( oSelf , sQuery , aResults )`
Fired when the AutoComplete instance receives query results from the data source.

Parameters:
  `oSelf <Object>` The AutoComplete instance.
  `sQuery <String>` The query string.
  `aResults <Array>` Results array.

#### itemArrowFromEvent

`itemArrowFromEvent ( oSelf , elItem )`
Fired when result item has been arrowed away from.

Parameters:
  `oSelf <Object>` 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 <Object>` 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 <Object>` 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 <Object>` 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 <Object>` 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 <Object>` The AutoComplete instance.

#### textboxBlurEvent

`textboxBlurEvent ( oSelf )`
Fired when the input field loses focus.

Parameters:
  `oSelf <Object>` The AutoComplete instance.

#### textboxFocusEvent

`textboxFocusEvent ( oSelf )`
Fired when the input field receives focus.

Parameters:
  `oSelf <Object>` The AutoComplete instance.

#### textboxKeyEvent

`textboxKeyEvent ( oSelf , nKeycode )`
Fired when the input field receives key input.

Parameters:
  `oSelf <Object>` 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 <Object>` The AutoComplete instance.
  `sQuery <String>` The query string.
  `sPrefill <String>` The prefill string.

#### unmatchedItemSelectEvent

`unmatchedItemSelectEvent ( oSelf , sQuery )`
Fired when a user selection does not match any of the displayed result items. Note that this event may not behave as expected when delimiter characters have been defined.

Parameters:
  `oSelf <Object>` The AutoComplete instance.
  `sQuery <String>` The user-typed query string.

Copyright © 2006 Yahoo! Inc. All rights reserved.