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