Scribd
Upload
38 views1 page

Yui Library: Autocomplete V2.9: Simple Use Case Interesting Moments

The document summarizes the YUI AutoComplete widget which provides auto-suggest functionality for text inputs. It includes an example of basic usage where an AutoComplete instance is created using a text input, container div, and DataSource. It also describes the AutoComplete constructor, available configuration properties, and customization options through event handling and overriding abstract methods.

Uploaded by

ihtnasakirah918
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views1 page

Yui Library: Autocomplete V2.9: Simple Use Case Interesting Moments

The document summarizes the YUI AutoComplete widget which provides auto-suggest functionality for text inputs. It includes an example of basic usage where an AutoComplete instance is created using a text input, container div, and DataSource. It also describes the AutoComplete constructor, available configuration properties, and customization options through event handling and overriding abstract methods.

Uploaded by

ihtnasakirah918
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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)

You might also like