Sei sulla pagina 1di 1

YUI Library: AutoComplete 2008-2-19 v2.

5
Simple Use Case (AutoComplete) Interesting Moments (AutoComplete) YAHOO.widget.
Event Arguments (passed via args array)
AutoComplete
Markup: Properties:
<div id=”myAutoComplete”> textboxFocusEvent/
[0] AC instance
<input id="myInput" type="text"> textboxBlurEvent animVert (b)
<div id="myContainer"></div> textboxKeyEvent [0] AC instance; [1] keycode int animHoriz (b)
</div>
dataRequestEvent/ animSpeed (int)
[0] AC instance; [1] query string
Script: dataErrorEvent delimChar (char ||
var myAutoComp = new YAHOO.widget.AutoComplete ("myInput", [0] AC instance; [1] query string; [2] array)
"myContainer", myDataSource); dataReturnEvent
results array maxResultsDisplayed
Instantiates a new AutoComplete object, myAutoComp, which queries an containerExpandEvent/ (int)
existing DataSource myDataSource. [0] AC instance minQueryLength (int)
containerCollapseEvent
itemArrowToEvent/ queryDelay (int)
[0] AC instance; [1] <li> element
Constructor (AutoComplete) itemArrowFromEvent autoHighlight (b)
itemMouseOverEvent/ highlightClassName
YAHOO.widget.AutoComplete(str | el ref input field, str | [0] AC instance; [1] <li> element (string)
el ref suggestion container, obj DataSource instance[, itemMouseOutEvent
obj configuration object]); [0] AC instance; [1] <li> element; [2] prehighlightClass
itemSelectEvent Name (string)
item data object or array
Arguments: useShadow (b)
(1) HTML element (string or object): Text input or textarea element. selectionEnforceEvent [0] AC instance
unmatchedItemSelectEvent [0] AC instance; [1] user selected string useIFrame (b)
(2) HTML element (string or object): Suggestion container.
[0] AC instance; [1] query string; [2] forceSelection (b)
(3) DataSource instance (obj): An instantiated DataSource object; see below
for DataSource types and constructor syntax.
typeAheadEvent typeAhead (b)
prefill string
(4) Configuration object (object): An optional object literal defines property allowBrowser
Subscribe to AutoComplete Custom Events on your AutoComplete instance:
values of an AutoComplete instance. myAC.containerExpandEvent.subscribe(myFn[, myObj, bScope]); Autocomplete (b)
alwaysShowContainer
Constructors (DataSource Classes) Simple Use Case (DataSource) (b)

YAHOO.widget.DS_JSArray(arr js array[, obj configuration var myDataSource=new YAHOO.widget.DS_JSArray(["a","b"]); YAHOO.widget.


object]); Instantiates a new DataSource object, myDataSource, which is an array of DataSource Properties:
(1) JS Array (array): A JavaScript array of strings. strings that queries can be matched against.
(2) Configuration object (object): An optional object literal defines property maxCacheEntries (int)
values of a DataSource instance. queryMatchCase (b)
Custom Formatting (AutoComplete) queryMatchContains
YAHOO.widget.DS_JSFunction(str sURI, fn callback[, obj
configuration object]); The formatResult function gets passed (1) an array that holds result data (b)
and (2) the original query string. Override this function to return custom markup queryMatchSubset (b)
(1) JS Function (fn): A JavaScript function which returns an array of strings. to populate each <li> element in the container.
(2) Configuration object (object): See above.
myAC.formatResult = function(aResultItem, sQuery) { YAHOO.widget.DS_XHR
YAHOO.widget.DS_ScriptNode(str sURI, array schema[, obj var sKey = aResultItem[0]; //the query match key Properties:
configuration object]); // Additional data mapped by schema
(1) URI: URI to the script location that will return data. var attribute1 = aResultItem[1]; responseType (static
(2) Schema (array): Schema description of server response data. var attribute2 = aResultItem[2]; constant) TYPE_FLAT,
return (sKey + “: “ + attribute1); } TYPE_JSON, or TYPE_XML
(3) Configuration object (object): See above.
scriptQueryParam
YAHOO.widget.DS_XHR(sr script uri, array schema[, obj (string)
configuration object]); Dependencies scriptQueryAppend
(1) Script URI (string): Server URI (local domains only – use a proxy for AutoComplete requires the YAHOO Global Object, Dom, and Event; (string)
remote domains). Connection Manager (for DS_XHR datasources), Animation (for animated responseStripAfter
(2) Schema (array): Schema description of server response data. opening of the suggestion container), Get and JSON (for DS_ScriptNode (string)
(3) Configuration object (object): See above. datasources) are optional. connTimeout (int)

Potrebbero piacerti anche