webgui/www/extras/yui-ext/docs/output/YAHOO.widget.AutoComplete.html
JT Smith cfd09a5cb6 upgraded to yui 0.12.0
upgraded to yui-ext 0.33 rc2
2006-11-28 02:23:34 +00:00

1019 lines
No EOL
56 KiB
HTML

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YAHOO.widget.AutoComplete</title>
<link rel="stylesheet" type="text/css" href="../resources/reset.css"/>
<link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="../resources/print.css" media="print">
</head>
<body>
<div class="body-wrap">
<div class="top-tools"><img src="../resources/print.gif" width="16" height="16" align="absmiddle">&nbsp;<a href="YAHOO.widget.AutoComplete.html" target="_blank">Print Friendly</a></div>
<h1>Class YAHOO.widget.AutoComplete</h1>
<table cellspacing="0">
<tr><td class="label">Package:</td><td>YAHOO.widget</td></tr>
<tr><td class="label">Class:</td><td>AutoComplete</td></tr>
<tr><td class="label">Extends:</td><td>Object</td></tr>
<tr><td class="label">Defined In:</td><td><a href="autocomplete.js.html">autocomplete.js</a></td></tr>
</table>
<div class="description">
The AutoComplete class provides the customizable functionality of a plug-and-play DHTML
auto completion widget. Some key features:
<ul>
<li>Navigate with up/down arrow keys and/or mouse to pick a selection</li>
<li>The drop down container can "roll down" or "fly out" via configurable
animation</li>
<li>UI look-and-feel customizable through CSS, including container
attributes, borders, position, fonts, etc</li>
</ul> </div>
<hr />
<a name="properties"></a>
<h2>Public Properties</h2>
<table cellspacing="0" class="member-table">
<tr>
<th class="sig-header" colspan="2">Property</th>
<th class="msource-header">Defined By</th>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#allowBrowserAutocomplete">allowBrowserAutocomplete</a> : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Whether or not to allow browsers to cache user-typed input in the input
field. Disabling this feature will prevent th...</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#alwaysShowContainer">alwaysShowContainer</a> : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Whether or not the results container should always be displayed.
Enabling this feature displays the container when th...</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#animHoriz">animHoriz</a> : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Whether or not to animate the expansion/collapse of the results container in the
horizontal direction.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#animSpeed">animSpeed</a> : Number</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Speed of container expand/collapse animation, in seconds..</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#animVert">animVert</a> : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Whether or not to animate the expansion/collapse of the results container in the
vertical direction.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#autoHighlight">autoHighlight</a> : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Whether or not the first item in results container should be automatically highlighted
on expand.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#dataSource">dataSource</a> : Object</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">The DataSource object that encapsulates the data used for auto completion.
This object should be an inherited object ...</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#delimChar">delimChar</a> : String</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Query delimiter. A single character separator for multiple delimited
selections. Multiple delimiter characteres may b...</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#forceSelection">forceSelection</a> : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Whether or not to force the user's selection to match one of the query
results. Enabling this feature essentially tra...</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#highlighClassName">highlighClassName</a> : String</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Class name of a highlighted item within results container.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#maxResultsDisplayed">maxResultsDisplayed</a> : Number</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Maximum number of results to display in results container.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#minQueryLength">minQueryLength</a> : Number</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Number of characters that must be entered before querying for results. A negative value
effectively turns off the wid...</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#prehighlightClassName">prehighlightClassName</a> : String</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Class name of a pre-highlighted item within results container.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#queryDelay">queryDelay</a> : Number</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Number of seconds to delay before submitting a query request. If a query
request is received before a previous one h...</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#typeAhead">typeAhead</a> : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Whether or not the input field should be automatically updated
with the first query result as the user types, auto-se...</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#useIFrame">useIFrame</a> : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Whether or not to use an iFrame to layer over Windows form elements in
IE. Set to true only when the results containe...</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#useShadow">useShadow</a> : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Whether or not the results container should have a shadow.</td>
</tr>
</table>
<a name="methods"></a>
<h2>Public Methods</h2>
<table cellspacing="0" class="member-table">
<tr>
<th class="sig-header" colspan="2">Method</th>
<th class="msource-header">Defined By</th>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#AutoComplete">AutoComplete</a>(<code>elInput {HTMLElement}</code>, <code>elInput {String}</code>, <code>elContainer {HTMLElement}</code>, <code>elContainer {String}</code>, <code>oDataSource {Object}</code>, <span class="optional" title="Optional">[<code>oConfigs {Object}</code>]</span>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc"></td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#doBeforeExpandContainer">doBeforeExpandContainer</a>() : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Overridable method called before container expands allows implementers to access data
and DOM elements.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#formatResult">formatResult</a>(<code>oResultItem {Object}</code>, <code>sQuery {String}</code>) : String</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Overridable method that converts a result item object into HTML markup
for display. Return data values are accessible...</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#getListItemData">getListItemData</a>() : Object/Array</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Public accessor to the data held in an &lt;li&gt; element of the
results container.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#getListItems">getListItems</a>() : HTMLElement[]</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Public accessor to the internal array of DOM &lt;li&gt; elements that
display query results within the results contai...</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#isContainerOpen">isContainerOpen</a>() : Boolean</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Returns true if container is in an expanded state, false otherwise.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#sendQuery">sendQuery</a>(<code>sQuery {String}</code>) : void</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Makes query request to the DataSource.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#setBody">setBody</a>(<code>sHeader {String}</code>) : void</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Sets HTML markup for the results container body. This markup will be
inserted within a &lt;div&gt; tag with a class o...</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#setFooter">setFooter</a>(<code>sFooter {String}</code>) : void</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Sets HTML markup for the results container footer. This markup will be
inserted within a &lt;div&gt; tag with a class...</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#setHeader">setHeader</a>(<code>sHeader {String}</code>) : void</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Sets HTML markup for the results container header. This markup will be
inserted within a &lt;div&gt; tag with a class...</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#toString">toString</a>() : String</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Public accessor to the unique name of the AutoComplete instance.</td>
</tr>
</table>
<a name="events"></a>
<h2>Public Events</h2>
<table cellspacing="0" class="member-table">
<tr>
<th class="sig-header" colspan="2">Event</th>
<th class="msource-header">Defined By</th>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-containerCollapseEvent">containerCollapseEvent</a> : (<code>oSelf {Object}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Fired when the results container is collapsed.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-containerExpandEvent">containerExpandEvent</a> : (<code>oSelf {Object}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Fired when the results container is expanded.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-dataErrorEvent">dataErrorEvent</a> : (<code>oSelf {Object}</code>, <code>sQuery {String}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Fired when the AutoComplete instance does not receive query results from the
DataSource due to an error.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-dataRequestEvent">dataRequestEvent</a> : (<code>oSelf {Object}</code>, <code>sQuery {String}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Fired when the AutoComplete instance makes a query to the DataSource.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-dataReturnEvent">dataReturnEvent</a> : (<code>oSelf {Object}</code>, <code>sQuery {String}</code>, <code>aResults {Array}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Fired when the AutoComplete instance receives query results from the data
source.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-itemArrowFromEvent">itemArrowFromEvent</a> : (<code>oSelf {Object}</code>, <code>elItem {HTMLElement}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Fired when result item has been arrowed away from.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-itemArrowToEvent">itemArrowToEvent</a> : (<code>oSelf {Object}</code>, <code>elItem {HTMLElement}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Fired when result item has been arrowed to.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-itemMouseOutEvent">itemMouseOutEvent</a> : (<code>oSelf {Object}</code>, <code>elItem {HTMLElement}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Fired when result item has been moused out.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-itemMouseOverEvent">itemMouseOverEvent</a> : (<code>oSelf {Object}</code>, <code>elItem {HTMLElement}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Fired when result item has been moused over.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-itemSelectEvent">itemSelectEvent</a> : (<code>oSelf {Object}</code>, <code>elItem {HTMLElement}</code>, <code>oData {Object}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Fired when an item is selected via mouse click, ENTER key, or TAB key.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-selectionEnforceEvent">selectionEnforceEvent</a> : (<code>oSelf {Object}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Fired if forceSelection is enabled and the user's input has been cleared
because it did not match one of the returned...</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-textboxBlurEvent">textboxBlurEvent</a> : (<code>oSelf {Object}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Fired when the input field loses focus.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-textboxFocusEvent">textboxFocusEvent</a> : (<code>oSelf {Object}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Fired when the input field receives focus.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-textboxKeyEvent">textboxKeyEvent</a> : (<code>oSelf {Object}</code>, <code>nKeycode {Number}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Fired when the input field receives key input.</td>
</tr>
<tr>
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-typeAheadEvent">typeAheadEvent</a> : (<code>oSelf {Object}</code>, <code>sQuery {String}</code>, <code>sPrefill {String}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr>
<td class="mdesc">Fired when the input field has been prefilled by the type-ahead
feature.</td>
</tr>
<tr class="alt">
<td class="micon" rowspan="2">&nbsp;</td>
<td class="sig"><a class="mlink" href="#event-unmatchedItemSelectEvent">unmatchedItemSelectEvent</a> : (<code>oSelf {Object}</code>, <code>sQuery {String}</code>)</td>
<td class="msource" rowspan="2">AutoComplete</td>
</tr>
<tr class="alt">
<td class="mdesc">Fired when a user selection does not match any of the displayed result items.
Note that this event may not behave as ...</td>
</tr>
</table>
<h2 class="mdetail-head">Property Details</h2>
<div class="detail-wrap">
<a name="allowBrowserAutocomplete"></a>
<div class="mdetail">
<h3>allowBrowserAutocomplete</i></h3>
<code>public Boolean allowBrowserAutocomplete</code>
<div class="mdetail-desc">
Whether or not to allow browsers to cache user-typed input in the input
field. Disabling this feature will prevent the widget from setting the
autocomplete="off" on the input field. When autocomplete="off"
and users click the back button after form submission, user-typed input can
be prefilled by the browser from its cache. This caching of user input may
not be desired for sensitive data, such as credit card numbers, in which
case, implementers should consider setting allowBrowserAutocomplete to false. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="alwaysShowContainer"></a>
<div class="mdetail alt">
<h3>alwaysShowContainer</i></h3>
<code>public Boolean alwaysShowContainer</code>
<div class="mdetail-desc">
Whether or not the results container should always be displayed.
Enabling this feature displays the container when the widget is instantiated
and prevents the toggling of the container to a collapsed state. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="animHoriz"></a>
<div class="mdetail">
<h3>animHoriz</i></h3>
<code>public Boolean animHoriz</code>
<div class="mdetail-desc">
Whether or not to animate the expansion/collapse of the results container in the
horizontal direction. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="animSpeed"></a>
<div class="mdetail alt">
<h3>animSpeed</i></h3>
<code>public Number animSpeed</code>
<div class="mdetail-desc">
Speed of container expand/collapse animation, in seconds.. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="animVert"></a>
<div class="mdetail">
<h3>animVert</i></h3>
<code>public Boolean animVert</code>
<div class="mdetail-desc">
Whether or not to animate the expansion/collapse of the results container in the
vertical direction. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="autoHighlight"></a>
<div class="mdetail alt">
<h3>autoHighlight</i></h3>
<code>public Boolean autoHighlight</code>
<div class="mdetail-desc">
Whether or not the first item in results container should be automatically highlighted
on expand. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="dataSource"></a>
<div class="mdetail">
<h3>dataSource</i></h3>
<code>public Object dataSource</code>
<div class="mdetail-desc">
The DataSource object that encapsulates the data used for auto completion.
This object should be an inherited object from YAHOO.widget.DataSource. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="delimChar"></a>
<div class="mdetail alt">
<h3>delimChar</i></h3>
<code>public String delimChar</code>
<div class="mdetail-desc">
Query delimiter. A single character separator for multiple delimited
selections. Multiple delimiter characteres may be defined as an array of
strings. A null value or empty string indicates that query results cannot
be delimited. This feature is not recommended if you need forceSelection to
be true. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="forceSelection"></a>
<div class="mdetail">
<h3>forceSelection</i></h3>
<code>public Boolean forceSelection</code>
<div class="mdetail-desc">
Whether or not to force the user's selection to match one of the query
results. Enabling this feature essentially transforms the input field into a
&lt;select&gt; field. This feature is not recommended with delimiter character(s)
defined. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="highlighClassName"></a>
<div class="mdetail alt">
<h3>highlighClassName</i></h3>
<code>public String highlighClassName</code>
<div class="mdetail-desc">
Class name of a highlighted item within results container. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="maxResultsDisplayed"></a>
<div class="mdetail">
<h3>maxResultsDisplayed</i></h3>
<code>public Number maxResultsDisplayed</code>
<div class="mdetail-desc">
Maximum number of results to display in results container. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="minQueryLength"></a>
<div class="mdetail alt">
<h3>minQueryLength</i></h3>
<code>public Number minQueryLength</code>
<div class="mdetail-desc">
Number of characters that must be entered before querying for results. A negative value
effectively turns off the widget. A value of 0 allows queries of null or empty string
values. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="prehighlightClassName"></a>
<div class="mdetail">
<h3>prehighlightClassName</i></h3>
<code>public String prehighlightClassName</code>
<div class="mdetail-desc">
Class name of a pre-highlighted item within results container. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="queryDelay"></a>
<div class="mdetail alt">
<h3>queryDelay</i></h3>
<code>public Number queryDelay</code>
<div class="mdetail-desc">
Number of seconds to delay before submitting a query request. If a query
request is received before a previous one has completed its delay, the
previous request is cancelled and the new request is set to the delay. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="typeAhead"></a>
<div class="mdetail">
<h3>typeAhead</i></h3>
<code>public Boolean typeAhead</code>
<div class="mdetail-desc">
Whether or not the input field should be automatically updated
with the first query result as the user types, auto-selecting the substring
that the user has not typed. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="useIFrame"></a>
<div class="mdetail alt">
<h3>useIFrame</i></h3>
<code>public Boolean useIFrame</code>
<div class="mdetail-desc">
Whether or not to use an iFrame to layer over Windows form elements in
IE. Set to true only when the results container will be on top of a
&lt;select&gt; field in IE and thus exposed to the IE z-index bug (i.e.,
5.5 < IE < 7). </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
<a name="useShadow"></a>
<div class="mdetail">
<h3>useShadow</i></h3>
<code>public Boolean useShadow</code>
<div class="mdetail-desc">
Whether or not the results container should have a shadow. </div>
<div class="mdetail-def">This property is defined by AutoComplete.</div>
</div>
</div>
<a name="AutoComplete"></a>
<h2 class="mdetail-head">Constructor Details</h2>
<div class="detail-wrap">
<div class="mdetail">
<h3>AutoComplete</i></h3>
<code>public function AutoComplete(<code>elInput {HTMLElement}</code>, <code>elInput {String}</code>, <code>elContainer {HTMLElement}</code>, <code>elContainer {String}</code>, <code>oDataSource {Object}</code>, <span class="optional" title="Optional">[<code>oConfigs {Object}</code>]</span>)</code>
<div class="mdetail-desc">
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>{HTMLElement}</code> : elInput<div class="sub-desc">DOM element reference of an input field</div></li><li><code>{String}</code> : elInput<div class="sub-desc">String ID of an input field</div></li><li><code>{HTMLElement}</code> : elContainer<div class="sub-desc">DOM element reference of an existing DIV</div></li><li><code>{String}</code> : elContainer<div class="sub-desc">String ID of an existing DIV</div></li><li><code>{Object}</code> : oDataSource<div class="sub-desc">Instance of YAHOO.widget.DataSource for query/results</div></li><li><code>{Object}</code> : oConfigs<div class="sub-desc">(optional) Object literal of configuration params</div></li> </ul>
</div>
</div>
</div>
</div>
<h2 class="mdetail-head">Method Details</h2>
<div class="detail-wrap">
<a name="doBeforeExpandContainer"></a>
<div class="mdetail">
<h3>doBeforeExpandContainer</i></h3>
<code>public function doBeforeExpandContainer()</code>
<div class="mdetail-desc">
Overridable method called before container expands allows implementers to access data
and DOM elements.
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li>None.</li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Boolean</code><div class="sub-desc">Return true to continue expanding container, false to cancel the expand.</div></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
<a name="formatResult"></a>
<div class="mdetail alt">
<h3>formatResult</i></h3>
<code>public function formatResult(<code>oResultItem {Object}</code>, <code>sQuery {String}</code>)</code>
<div class="mdetail-desc">
Overridable method that converts a result item object into HTML markup
for display. Return data values are accessible via the oResultItem object,
and the key return value will always be oResultItem[0]. Markup will be
displayed within &lt;li&gt; element tags in the container.
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>{Object}</code> : oResultItem<div class="sub-desc">Result item representing one query result. Data is held in an array.</div></li><li><code>{String}</code> : sQuery<div class="sub-desc">The current query string.</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>String</code><div class="sub-desc">HTML markup of formatted result data.</div></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
<a name="getListItemData"></a>
<div class="mdetail">
<h3>getListItemData</i></h3>
<code>public function getListItemData()</code>
<div class="mdetail-desc">
Public accessor to the data held in an &lt;li&gt; element of the
results container.
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li>None.</li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Object/Array</code><div class="sub-desc">Object or array of result data or null</div></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
<a name="getListItems"></a>
<div class="mdetail alt">
<h3>getListItems</i></h3>
<code>public function getListItems()</code>
<div class="mdetail-desc">
Public accessor to the internal array of DOM &lt;li&gt; elements that
display query results within the results container.
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li>None.</li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>HTMLElement[]</code><div class="sub-desc">Array of &lt;li&gt; elements within the results container.</div></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
<a name="isContainerOpen"></a>
<div class="mdetail">
<h3>isContainerOpen</i></h3>
<code>public function isContainerOpen()</code>
<div class="mdetail-desc">
Returns true if container is in an expanded state, false otherwise.
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li>None.</li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Boolean</code><div class="sub-desc">Returns true if container is in an expanded state, false otherwise.</div></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
<a name="sendQuery"></a>
<div class="mdetail alt">
<h3>sendQuery</i></h3>
<code>public function sendQuery(<code>sQuery {String}</code>)</code>
<div class="mdetail-desc">
Makes query request to the DataSource.
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>{String}</code> : sQuery<div class="sub-desc">Query string.</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>void</code></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
<a name="setBody"></a>
<div class="mdetail">
<h3>setBody</i></h3>
<code>public function setBody(<code>sHeader {String}</code>)</code>
<div class="mdetail-desc">
Sets HTML markup for the results container body. This markup will be
inserted within a &lt;div&gt; tag with a class of "ac_bd".
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>{String}</code> : sHeader<div class="sub-desc">HTML markup for results container body.</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>void</code></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
<a name="setFooter"></a>
<div class="mdetail alt">
<h3>setFooter</i></h3>
<code>public function setFooter(<code>sFooter {String}</code>)</code>
<div class="mdetail-desc">
Sets HTML markup for the results container footer. This markup will be
inserted within a &lt;div&gt; tag with a class of "ac_ft".
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>{String}</code> : sFooter<div class="sub-desc">HTML markup for results container footer.</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>void</code></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
<a name="setHeader"></a>
<div class="mdetail">
<h3>setHeader</i></h3>
<code>public function setHeader(<code>sHeader {String}</code>)</code>
<div class="mdetail-desc">
Sets HTML markup for the results container header. This markup will be
inserted within a &lt;div&gt; tag with a class of "ac_hd".
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>{String}</code> : sHeader<div class="sub-desc">HTML markup for results container header.</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>void</code></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
<a name="toString"></a>
<div class="mdetail alt">
<h3>toString</i></h3>
<code>public function toString()</code>
<div class="mdetail-desc">
Public accessor to the unique name of the AutoComplete instance.
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li>None.</li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>String</code><div class="sub-desc">Unique name of the AutoComplete instance.</div></li>
</ul>
</div>
</div>
<div class="mdetail-def">This method is defined by AutoComplete.</div>
</div>
</div>
<h2 class="mdetail-head">Event Details</h2>
<div class="detail-wrap">
<a name="event-containerCollapseEvent"></a>
<div class="mdetail">
<h3>containerCollapseEvent</i></h3>
<code>public event containerCollapseEvent</code>
<div class="mdetail-desc">
Fired when the results container is collapsed.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-containerExpandEvent"></a>
<div class="mdetail alt">
<h3>containerExpandEvent</i></h3>
<code>public event containerExpandEvent</code>
<div class="mdetail-desc">
Fired when the results container is expanded.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-dataErrorEvent"></a>
<div class="mdetail">
<h3>dataErrorEvent</i></h3>
<code>public event dataErrorEvent</code>
<div class="mdetail-desc">
Fired when the AutoComplete instance does not receive query results from the
DataSource due to an error.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{String}</code> : sQuery<div class="sub-desc">The query string.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-dataRequestEvent"></a>
<div class="mdetail alt">
<h3>dataRequestEvent</i></h3>
<code>public event dataRequestEvent</code>
<div class="mdetail-desc">
Fired when the AutoComplete instance makes a query to the DataSource.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{String}</code> : sQuery<div class="sub-desc">The query string.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-dataReturnEvent"></a>
<div class="mdetail">
<h3>dataReturnEvent</i></h3>
<code>public event dataReturnEvent</code>
<div class="mdetail-desc">
Fired when the AutoComplete instance receives query results from the data
source.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{String}</code> : sQuery<div class="sub-desc">The query string.</div></li><li><code>{Array}</code> : aResults<div class="sub-desc">Results array.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-itemArrowFromEvent"></a>
<div class="mdetail alt">
<h3>itemArrowFromEvent</i></h3>
<code>public event itemArrowFromEvent</code>
<div class="mdetail-desc">
Fired when result item has been arrowed away from.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{HTMLElement}</code> : elItem<div class="sub-desc">The &lt;li&gt; element item arrowed from.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-itemArrowToEvent"></a>
<div class="mdetail">
<h3>itemArrowToEvent</i></h3>
<code>public event itemArrowToEvent</code>
<div class="mdetail-desc">
Fired when result item has been arrowed to.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{HTMLElement}</code> : elItem<div class="sub-desc">The &lt;li&gt; element item arrowed to.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-itemMouseOutEvent"></a>
<div class="mdetail alt">
<h3>itemMouseOutEvent</i></h3>
<code>public event itemMouseOutEvent</code>
<div class="mdetail-desc">
Fired when result item has been moused out.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{HTMLElement}</code> : elItem<div class="sub-desc">The &lt;li&gt; element item moused from.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-itemMouseOverEvent"></a>
<div class="mdetail">
<h3>itemMouseOverEvent</i></h3>
<code>public event itemMouseOverEvent</code>
<div class="mdetail-desc">
Fired when result item has been moused over.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{HTMLElement}</code> : elItem<div class="sub-desc">The &lt;li&gt element item moused to.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-itemSelectEvent"></a>
<div class="mdetail alt">
<h3>itemSelectEvent</i></h3>
<code>public event itemSelectEvent</code>
<div class="mdetail-desc">
Fired when an item is selected via mouse click, ENTER key, or TAB key.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{HTMLElement}</code> : elItem<div class="sub-desc">The selected &lt;li&gt; element item.</div></li><li><code>{Object}</code> : oData<div class="sub-desc">The data returned for the item, either as an object, or mapped from the schema into an array.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-selectionEnforceEvent"></a>
<div class="mdetail">
<h3>selectionEnforceEvent</i></h3>
<code>public event selectionEnforceEvent</code>
<div class="mdetail-desc">
Fired if forceSelection is enabled and the user's input has been cleared
because it did not match one of the returned query results.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-textboxBlurEvent"></a>
<div class="mdetail alt">
<h3>textboxBlurEvent</i></h3>
<code>public event textboxBlurEvent</code>
<div class="mdetail-desc">
Fired when the input field loses focus.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-textboxFocusEvent"></a>
<div class="mdetail">
<h3>textboxFocusEvent</i></h3>
<code>public event textboxFocusEvent</code>
<div class="mdetail-desc">
Fired when the input field receives focus.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-textboxKeyEvent"></a>
<div class="mdetail alt">
<h3>textboxKeyEvent</i></h3>
<code>public event textboxKeyEvent</code>
<div class="mdetail-desc">
Fired when the input field receives key input.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{Number}</code> : nKeycode<div class="sub-desc">The keycode number.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-typeAheadEvent"></a>
<div class="mdetail">
<h3>typeAheadEvent</i></h3>
<code>public event typeAheadEvent</code>
<div class="mdetail-desc">
Fired when the input field has been prefilled by the type-ahead
feature.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{String}</code> : sQuery<div class="sub-desc">The query string.</div></li><li><code>{String}</code> : sPrefill<div class="sub-desc">The prefill string.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
<a name="event-unmatchedItemSelectEvent"></a>
<div class="mdetail alt">
<h3>unmatchedItemSelectEvent</i></h3>
<code>public event unmatchedItemSelectEvent</code>
<div class="mdetail-desc">
Fired when a user selection does not match any of the displayed result items.
Note that this event may not behave as expected when delimiter characters
have been defined.
<div class="mdetail-params">
<strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
<ul><li><code>{Object}</code> : oSelf<div class="sub-desc">The AutoComplete instance.</div></li><li><code>{String}</code> : sQuery<div class="sub-desc">The user-typed query string.</div></li> </ul>
</div>
</div>
<div class="mdetail-def">This event is defined by AutoComplete.</div>
</div>
</div>
</div>
<hr>
Copyright &copy; 2006 Jack Slocum. All rights reserved.
</body>
</html>