# Yahoo! UI Library

### autocomplete 3.3.0

Yahoo! UI Library > autocomplete > AutoCompleteList
Search:
Filters Show Private Show Protected Show Deprecated

## Class AutoCompleteList - extends Widget - uses AutoCompleteBase , WidgetPosition , WidgetPositionAlign , WidgetStack

Known Subclasses:
  Plugin.AutoComplete

Traditional autocomplete dropdown list widget, just like Mom used to make.

### Constructor

AutoCompleteList `( config )`

Parameters:
  `config <Object>` Configuration object.

#### Properties inherited from Plugin.Host:

`PluginHost`

#### Properties inherited from Widget:

`_UI_ATTRS, BOUNDING_TEMPLATE, CONTENT_TEMPLATE, DEF_PARENT_NODE, DEF_UNIT, UI_EVENTS`

#### Properties inherited from AutoCompleteBase:

`_YQL_SOURCE_REGEX`

#### Properties inherited from WidgetStack:

``

#### Properties inherited from Attribute:

``

#### Properties inherited from WidgetPositionAlign:

``

#### Properties inherited from Base:

`name`

#### Properties inherited from WidgetPosition:

``

### Methods

#### _activateNextItem

`protected void _activateNextItem ( )`
Activates the next item after the currently active item. If there is no next item and the `circular` attribute is `true`, focus will wrap back to the input node.
Chainable: This method is chainable.

#### _activatePrevItem

`protected void _activatePrevItem ( )`
Activates the item previous to the currently active item. If there is no previous item and the `circular` attribute is `true`, focus will wrap back to the input node.
Chainable: This method is chainable.

#### _add

`protected NodeList _add ( items )`
Appends the specified result items to the list inside a new item node.

Parameters:
  `items <Array|Node|HTMLElement|String>` Result item or array of result items.

Returns: `NodeList`
  Added nodes.

#### _afterActiveItemChange

`protected void _afterActiveItemChange ( e )`
Handles `activeItemChange` events.

Parameters:
  `e <EventTarget>`

#### _afterAlwaysShowListChange

`protected void _afterAlwaysShowListChange ( e )`
Handles `alwaysShowListChange` events.

Parameters:
  `e <EventTarget>`

#### _afterHoveredItemChange

`protected void _afterHoveredItemChange ( e )`
Handles `hoveredItemChange` events.

Parameters:
  `e <EventTarget>`

#### _afterMouseOut

`protected void _afterMouseOut ( e )`
Handles `mouseout` events.

Parameters:
  `e <EventTarget>`

#### _afterMouseOver

`protected void _afterMouseOver ( e )`
Handles `mouseover` events.

Parameters:
  `e <EventTarget>`

#### _afterResultsChange

`protected void _afterResultsChange ( e )`
Handles `resultsChange` events.

Parameters:
  `e <EventFacade>`

#### _afterVisibleChange

`protected void _afterVisibleChange ( e )`
Handles `visibleChange` events.

Parameters:
  `e <EventFacade>`

#### _ariaSay

`protected void _ariaSay ( stringId , subs )`
Updates the ARIA live region with the specified message.

Parameters:
  `stringId <String>` String id (from the `strings` attribute) of the message to speak.
  `subs <Object>` (optional) Substitutions for placeholders in the string.

#### _bindInput

`protected void _bindInput ( )`
Binds `inputNode` events and behavior.

#### _bindKeys

`protected void _bindKeys ( )`
Binds keyboard events.

#### _bindList

`protected void _bindList ( )`
Binds list events.

#### _clear

`protected void _clear ( )`
Clears the contents of the tray.

#### _createAriaNode

`protected Node _createAriaNode ( )`
Creates and returns an ARIA live region node.

Returns: `Node`
  ARIA node.

#### _createItemNode

`protected Node _createItemNode ( result )`
Creates and returns an item node with the specified content.

Parameters:
  `result <Object>` Result object.

Returns: `Node`
  Item node.

#### _createListNode

`protected Node _createListNode ( )`
Creates and returns a list node.

Returns: `Node`
  List node.

#### _defSelectFn

`protected void _defSelectFn ( e )`
Default `select` event handler.

Parameters:
  `e <EventTarget>`

#### _getFirstItemNode

`protected Node|null _getFirstItemNode ( )`
Gets the first item node in the list, or `null` if the list is empty.

#### _getLastItemNode

`protected Node|null _getLastItemNode ( )`
Gets the last item node in the list, or `null` if the list is empty.

#### _initKeys

`protected void _initKeys ( )`
Initializes keyboard command mappings.

#### _keyDown

`protected void _keyDown ( )`
Called when the down arrow key is pressed.

#### _keyEnter

`protected void _keyEnter ( )`
Called when the enter key is pressed.

#### _keyEsc

`protected void _keyEsc ( )`
Called when the escape key is pressed.

#### _keyTab

`protected void _keyTab ( )`
Called when the tab key is pressed.

#### _keyUp

`protected void _keyUp ( )`
Called when the up arrow key is pressed.

#### _onInputKey

`protected void _onInputKey ( e )`
Handles `inputNode` key events.

Parameters:
  `e <EventTarget>`

#### _onItemClick

`protected void _onItemClick ( e )`
Delegated event handler for item `click` events.

Parameters:
  `e <EventTarget>`

#### _onListInputBlur

`protected void _onListInputBlur ( e )`
Handles `inputNode` `blur` events.

Parameters:
  `e <EventTarget>`

#### _syncResults

`protected void _syncResults ( results )`
Synchronizes the results displayed in the list with those in the results argument, or with the `results` attribute if an argument is not provided.

Parameters:
  `results <Array>` (optional) Results.

#### _syncVisibility

`protected void _syncVisibility ( visible )`
Synchronizes the visibility of the tray with the visible argument, or with the `visible` attribute if an argument is not provided.

Parameters:
  `visible <Boolean>` (optional) Visibility.

#### _unbindKeys

`protected void _unbindKeys ( )`
Unbinds keyboard events.

#### hide

`void hide ( )`
Hides the list, unless the `alwaysShowList` attribute is `true`.
Chainable: This method is chainable.

#### selectItem

`void selectItem ( itemNode )`
Selects the specified itemNode, or the current `activeItem` if itemNode is not specified.

Parameters:
  `itemNode <Node>` (optional) Item node to select.

Chainable: This method is chainable.

#### Methods inherited from Plugin.Host:

`_destroyPlugins, _initPlugins, hasPlugin, plug, unplug`

#### Methods inherited from Widget:

`_applyParsedConfig, _applyParser, _bindAttrUI, _bindDOM, _bindUI, _createUIEvent, _defaultCB, _defRenderFn, _destroyUIEvents, _getHtmlParser, _getSrcNode, _getStrings, _getUIEventNode, _guid, _initUIEvent, _isUIEvent, _onDocFocus, _onDocMouseDown, _removeLoadingClassNames, _renderBox, _renderBoxClassNames, _renderUI, _setAttrUI, _setBB, _setBox, _setCB, _setStrings, _strSetter, _syncAttrUI, _syncUI, _uiSetDim, _uiSetDisabled, _uiSetFocused, _uiSetHeight, _uiSetTabIndex, _uiSetVisible, _uiSetWidth, _uiSizeCB, _unbindDOM, _unbindUI, _validTabIndex, bindUI, blur, destructor, disable, enable, focus, getClassName, getDefaultLocale, getSkinName, getString, getStrings, hide, initializer, render, renderer, renderUI, show, syncUI, toString`

#### Methods inherited from WidgetPosition:

`_afterXYChange, _bindUIPosition, _getX, _getY, _renderUIPosition, _setX, _setY, _syncUIPosition, _uiSetXY, _validateXY, move, syncXY`

#### Methods inherited from WidgetStack:

`_addShimResizeHandlers, _afterShimChange, _afterZIndexChange, _bindUIStack, _destroyShim, _detachStackHandles, _getShimTemplate, _renderShim, _renderShimDeferred, _renderUIStack, _setZIndex, _syncUIStack, _uiSetShim, _uiSetZIndex, sizeShim`

#### Methods inherited from Attribute:

`_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttr, _getAttrCfg, _getAttrInitVal, _getAttrs, _getStateVal, _isLazyAttr, _normAttrVals, _protectAttrs, _set, _setAttr, _setAttrs, _setAttrVal, _setStateVal, addAttr, addAttrs, attrAdded, get, getAttrs, modifyAttr, removeAttr, reset, set, setAttrs`

#### Methods inherited from WidgetPositionAlign:

`_afterAlignChange, _bindUIStack, _doAlign, _setAlignCenter, _syncUIPosAlign, _uiSetAlign, align, centered`

#### Methods inherited from EventTarget:

`_getType, _monitor, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, getTargets, on, once, parseType, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll`

#### Methods inherited from Base:

`_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, _preInitEventCfg, destroy, init, toString`

#### Methods inherited from AutoCompleteBase:

`_afterValueChange, _bindUIACBase, _createArraySource, _createFunctionSource, _createIOSource, _createJSONPSource, _createObjectSource, _createStringSource, _createYQLSource, _defaultYQLLocator, _defClearFn, _defQueryFn, _defResultsFn, _destructorACBase, _functionValidator, _getObjectValue, _jsonpFormatter, _onInputBlur, _onInputValueChange, _onResponse, _parseResponse, _parseValue, _setLocator, _setRequestTemplate, _setResultFilters, _setResultHighlighter, _setSource, _sourceSuccess, _syncBrowserAutocomplete, _syncUIACBase, _updateValue, sendRequest`

### Events

#### activateFirstItemChange

`activateFirstItemChange ( event )`
Fires when the value for the configuration attribute 'activateFirstItem' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### activeItemChange

`activeItemChange ( event )`
Fires when the value for the configuration attribute 'activeItem' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### alwaysShowListChange

`alwaysShowListChange ( event )`
Fires when the value for the configuration attribute 'alwaysShowList' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### circularChange

`circularChange ( event )`
Fires when the value for the configuration attribute 'circular' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### hoveredItemChange

`hoveredItemChange ( event )`
Fires when the value for the configuration attribute 'hoveredItem' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### listNodeChange

`listNodeChange ( event )`
Fires when the value for the configuration attribute 'listNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### scrollIntoViewChange

`scrollIntoViewChange ( event )`
Fires when the value for the configuration attribute 'scrollIntoView' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### select

`select ( e )`
Fires when an autocomplete suggestion is selected from the list, typically via a keyboard action or mouse click.

Parameters:
  `e <EventFacade>` Event facade with the following additional properties:
  itemNode (Node)
    List item node that was selected.
  result (Object)
    AutoComplete result object.

Preventable: This event is preventable by method e.preventDefault(). The default function executed by this event is _defSelectFn.

#### stringsChange

`stringsChange ( event )`
Fires when the value for the configuration attribute 'strings' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### tabSelectChange

`tabSelectChange ( event )`
Fires when the value for the configuration attribute 'tabSelect' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### Events inherited from Widget:

`boundingBoxChange, contentBoxChange, disabledChange, focusedChange, heightChange, idChange, localeChange, renderChange, renderedChange, srcNodeChange, stringsChange, tabIndexChange, visibleChange, widget:contentUpdate, widget:render, widthChange,`

#### Events inherited from AutoCompleteBase:

`allowBrowserAutocompleteChange, allowTrailingDelimiterChange, clear, inputNodeChange, maxResultsChange, minQueryLengthChange, query, queryChange, queryDelayChange, queryDelimiterChange, requestTemplateChange, resultFiltersChange, resultFormatterChange, resultHighlighterChange, resultListLocatorChange, results resultsChange resultTextLocatorChange sourceChange tokenInputChange valueChange yqlEnvChange yqlProtocolChange`

#### Events inherited from WidgetStack:

`shimChange, zIndexChange,`

#### Events inherited from WidgetPositionAlign:

`alignChange, centeredChange,`

#### Events inherited from Base:

`destroy, destroyedChange, init, initializedChange,`

#### Events inherited from WidgetPosition:

`xChange, xyChange, yChange,`

### Configuration Attributes

#### activateFirstItem `- Boolean`

If `true`, the first item in the list will be activated by default when the list is initially displayed and when results change.
Default Value: false

#### activeItem `- Node`

Item that's currently active, if any. When the user presses enter, this is the item that will be selected.

#### alwaysShowList `- Boolean`

If `true`, the list will remain visible even when there are no results to display.
Default Value: false

#### circular `- Boolean`

If `true`, keyboard navigation will wrap around to the opposite end of the list when navigating past the first or last item.
Default Value: true

#### hoveredItem `- Node|null`

Item currently being hovered over by the mouse, if any.

#### listNode `- Node|null`

Node that will contain result items.

#### scrollIntoView `- Boolean`

If `true`, the viewport will be scrolled to ensure that the active list item is visible when necessary.
Default Value: false

#### strings `- Object`

Translatable strings used by the AutoCompleteList widget.

#### tabSelect `- Boolean`

If `true`, pressing the tab key while the list is visible will select the active item, if any.
Default Value: true

#### Configuration attributes inherited from Widget:

`boundingBox, contentBox, disabled, focused, height, id, locale render rendered srcNode strings tabIndex visible width`

#### Configuration attributes inherited from AutoCompleteBase:

`allowBrowserAutocomplete, allowTrailingDelimiter, inputNode, maxResults, minQueryLength, query, queryDelay, queryDelimiter, requestTemplate, resultFilters resultFormatter resultHighlighter resultListLocator results resultTextLocator source tokenInput value yqlEnv yqlProtocol`

#### Configuration attributes inherited from WidgetStack:

`shim zIndex`

#### Configuration attributes inherited from WidgetPositionAlign:

`align centered`

#### Configuration attributes inherited from Base:

`destroyed initialized`

#### Configuration attributes inherited from WidgetPosition:

`x, xy y`

Copyright © 2011 Yahoo! Inc. All rights reserved.