YUI Library: AutoComplete 2011-3-21 v2.

9
Simple Use Case Interesting Moments YAHOO.widget.
Event Arguments (passed via args array)
AutoComplete Key
Markup: Properties:
<div id=myAutoComplete> textboxFocusEvent/
<input id="myInput" type="text"> textboxBlurEvent/ [0] AC instance alwaysShow Container
<div id="myContainer"></div> textboxChangeEvent
</div> (b)
textboxKeyEvent [0] AC instance; [1] keycode int
animHoriz (b)
Script: [0] AC instance; [1] query string; [2] request
var myAutoComp = new YAHOO.widget.AutoComplete ("myInput",
dataRequestEvent
object
animSpeed (int)
"myContainer", myDataSource); [0] AC instance; [1] query string; [2] results animVert (b)
dataReturnEvent applyLocalFilter (b)
Instantiates a new AutoComplete object, myAutoComp, which queries an array
existing DataSource myDataSource. dataErrorEvent 0] AC instance; [1] query string autoHighlight (b)
containerExpandEvent/ delimChar (char || array)
containerCollapseEvent/ [0] AC instance forceSelection (b)
Constructor containerPopulateEvent highlightClassName
YAHOO.widget.AutoComplete(str | el ref input field, str | itemArrowToEvent/ (string)
[0] AC instance; [1] <li> element
el ref suggestion container, obj DataSource instance[, itemArrowFromEvent maxResultsDisplayed
obj configuration object]); itemMouseOverEvent/
[0] AC instance; [1] <li> element (int)
Arguments: itemMouseOutEvent
minQueryLength (int)
(1) HTML element (string or object): Text input or textarea element. [0] AC instance; [1] <li> element; [2] item
itemSelectEvent prehighlightClass Name
(2) HTML element (string or object): Suggestion container. data object or array
(3) DataSource instance (obj): An instantiated DataSource object; see below selectionEnforceEvent [0] AC instance (string)
for DataSource types and constructor syntax. [0] AC instance; [1] query string; [2] prefill queryDelay (int)
typeAheadEvent queryMatchCase (b)
(4) Configuration object (object): An optional object literal defines property string
values of an AutoComplete instance. unmatchedItemSelectEvent [0] AC instance; [1] user selected string queryMatchContains (b)
Subscribe to AutoComplete Custom Events on your AutoComplete instance: queryMatchSubset (b)
Solutions myAC.containerExpandEvent.subscribe(myFn[, myObj, bScope]); queryQuestionMark (b)
resultsTypeList (b)
Custom cell formatting: Abstract Methods suppressInputUpdate (b)
myAC.resultsTypeList = false; // pass data as an object Method Description typeAhead (b)
myAC.formatResult = function(oData, sQuery, sMatch) { This overridable abstract method gives typeAheadDelay (int)
return (sMatch + "(" + oData.param + ")" );
} implementers access to the DataSource useIFrame (b)
doBeforeLoadData response before it is consumed by the useShadow (b)
Custom local filtering: AutoComplete instance and rendered into
myAC.applyLocalFilter = true; // pass results thru filter the results container.
myAC.filterResults = function(sQuery, oFullResponse, This overridable abstract method gives
oParsedResponse, oCallback) { implementers access to result data and
var matches = [], matchee; DOM elements after the container has been
for(var i=0; i<oParsedResponse.results.length; i++) {
if(oParsedResponse.results[i].someValue > 0) { doBeforeExpandContainer rendered with results but before it is
matches[matches.length] = displayed to the user, for example to move
oParsedResponse.results[i] the container to a different position on the
} screen.
}
oParsedResponse.results = matches; Dependencies
return oParsedResponse;
} AutoComplete requires the YAHOO Global Object, Dom, and Event, and
DataSource. Animation (for animated opening of the suggestion container) is
optional.