- 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 Widget:
Properties inherited from Base:
Methods
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.
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.
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.
protected
void
_afterActiveItemChange
(
e
)
Handles activeItemChange
events.
- Parameters:
-
e
<EventTarget>
protected
void
_afterAlwaysShowListChange
(
e
)
Handles alwaysShowListChange
events.
- Parameters:
-
e
<EventTarget>
protected
void
_afterHoveredItemChange
(
e
)
Handles hoveredItemChange
events.
- Parameters:
-
e
<EventTarget>
protected
void
_afterMouseOut
(
e
)
Handles mouseout
events.
- Parameters:
-
e
<EventTarget>
protected
void
_afterMouseOver
(
e
)
Handles mouseover
events.
- Parameters:
-
e
<EventTarget>
protected
void
_afterResultsChange
(
e
)
Handles resultsChange
events.
- Parameters:
-
e
<EventFacade>
protected
void
_afterVisibleChange
(
e
)
Handles visibleChange
events.
- Parameters:
-
e
<EventFacade>
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.
protected
void
_bindInput
(
)
Binds inputNode
events and behavior.
protected
void
_bindKeys
(
)
Binds keyboard events.
protected
void
_bindList
(
)
Binds list events.
protected
void
_clear
(
)
Clears the contents of the tray.
protected
Node
_createAriaNode
(
)
Creates and returns an ARIA live region node.
protected
Node
_createItemNode
(
result
)
Creates and returns an item node with the specified content.
- Parameters:
-
result
<Object>
Result object.
- Returns:
Node
- Item node.
protected
Node
_createListNode
(
)
Creates and returns a list node.
protected
void
_defSelectFn
(
e
)
Default select
event handler.
- Parameters:
-
e
<EventTarget>
protected
Node|null
_getFirstItemNode
(
)
Gets the first item node in the list, or null
if the list is
empty.
protected
Node|null
_getLastItemNode
(
)
Gets the last item node in the list, or null
if the list is
empty.
protected
void
_initKeys
(
)
Initializes keyboard command mappings.
protected
void
_keyDown
(
)
Called when the down arrow key is pressed.
protected
void
_keyEnter
(
)
Called when the enter key is pressed.
protected
void
_keyEsc
(
)
Called when the escape key is pressed.
protected
void
_keyTab
(
)
Called when the tab key is pressed.
protected
void
_keyUp
(
)
Called when the up arrow key is pressed.
protected
void
_onInputBlur
(
e
)
Handles inputNode
blur
events.
- Parameters:
-
e
<EventTarget>
protected
void
_onInputKey
(
e
)
Handles inputNode
key events.
- Parameters:
-
e
<EventTarget>
protected
void
_onItemClick
(
e
)
Delegated event handler for item click
events.
- Parameters:
-
e
<EventTarget>
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.
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.
protected
void
_unbindKeys
(
)
Unbinds keyboard events.
void
hide
(
)
Hides the list, unless the alwaysShowList
attribute is
true
.
Chainable: This method is chainable.
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 Widget:
_applyParsedConfig,
_applyParser,
_bindAttrUI,
_bindDOM,
_bindUI,
_createUIEvent,
_defaultCB,
_defRenderFn,
_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
_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 EventTarget:
_getType,
_monitor,
_parseType,
addTarget,
after,
before,
bubble,
detach,
detachAll,
fire,
getEvent,
getTargets,
on,
once,
publish,
removeTarget,
subscribe,
unsubscribe,
unsubscribeAll
Methods inherited from Base:
_aggregateAttrs,
_defDestroyFn,
_defInitFn,
_destroyHierarchy,
_filterAttrCfs,
_getAttrCfgs,
_getClasses,
_initHierarchy,
_initHierarchyData,
_preInitEventCfg,
destroy,
init,
toString
_afterValueChange,
_bindUIACBase,
_createArraySource,
_createJSONPSource,
_createObjectSource,
_createStringSource,
_createYQLSource,
_defaultYQLLocator,
_defClearFn,
_defQueryFn,
_defResultsFn,
_destructorACBase,
_functionValidator,
_getObjectValue,
_jsonpFormatter,
_onInputValueChange,
_onResponse,
_parseResponse,
_parseValue,
_setLocator,
_setRequestTemplate,
_setResultFilters,
_setResultHighlighter,
_setSource,
_sourceSuccess,
_syncBrowserAutocomplete,
_syncUIACBase,
_updateValue,
sendRequest
Events
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
(
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
(
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
(
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
(
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
(
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
select
(
e
)
Fires when an autocomplete suggestion is selected from the list by
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 _defResultsFn.
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
(
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,
allowBrowserAutocompleteChange,
clear,
inputNodeChange,
maxResultsChange,
minQueryLengthChange,
query,
queryChange,
queryDelayChange,
queryDelimiterChange,
requestTemplateChange,
resultFiltersChange,
resultFormatterChange,
resultHighlighterChange,
resultListLocatorChange,
results
resultsChange
resultTextLocatorChange
sourceChange
tokenInputChange
valueChange
Events inherited from Base:
Configuration Attributes
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
Item that's currently active, if any. When the user presses enter,
this is the item that will be selected.
If true
, the list will remain visible even when there
are no results to display.
Default Value: false
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
Item currently being hovered over by the mouse, if any.
Node that will contain result items.
Translatable strings used by the AutoCompleteList widget.
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:
Configuration attributes inherited from Base: