oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui/docs/autocomplete/YAHOO.widget.AutoComplete.html
JT Smith 4f68a0933c added YUI and YUI-ext 
fixed the resizable text area with IE problem
fixed the ad space with IE problem
merged the 7.2.0 and 7.1.4 change logs
2006-11-07 23:15:57 +00:00

1594 lines
44 KiB
HTML
Raw Blame History

<html>
<head>
<title>JavaScript Documentation - </title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>JavaScript Documentation</h1>
<h3><a href="./index.html">AutoComplete</a></h3>
<div class="breadcrumbs">
<a href="./index.html">AutoComplete</a>
&gt;
<strong>YAHOO.widget.AutoComplete</strong>
</div>
</div>
<div id="body">
<div class="nav">
<div class="module resources">
<ul class="content">
<li><a href="overview-tree.html">Tree View</a></li>
<li><a href="index-all.html">Element Index</a></li>
</ul>
</div>
<div class="module">
<h4><a href="./allclasses-noframe.html">Classes</a></h4>
<ul class="content">
<li>
<a href="YAHOO.widget.html">
YAHOO.widget</a>
</li>
<li>
<a href="YAHOO.widget.AutoComplete.html">
YAHOO.widget.AutoComplete</a>
</li>
<li>
<a href="YAHOO.widget.DataSource.html">
YAHOO.widget.DataSource</a>
</li>
<li>
<a href="YAHOO.widget.DS_JSArray.html">
YAHOO.widget.DS_JSArray</a>
</li>
<li>
<a href="YAHOO.widget.DS_JSFunction.html">
YAHOO.widget.DS_JSFunction</a>
</li>
<li>
<a href="YAHOO.widget.DS_XHR.html">
YAHOO.widget.DS_XHR</a>
</li>
</ul>
</div>
<div class="module">
<h4><a href="./overview-summary.html">Files</a></h4>
<ul class="content">
<li>
<a href="overview-summary-AutoComplete.js.html">
AutoComplete.js</a>
</li>
<li>
<a href="overview-summary-DataSource.js.html">
DataSource.js</a>
</li>
</ul>
</div>
</div>
<div id="pri">
<div class="main">
<h2>Class YAHOO.widget.AutoComplete</h2>
<pre>Object
|
+--<b>YAHOO.widget.AutoComplete</b>
</pre>
<hr />
<!-- Class definition -->
<div class="class-def">
<div class="class-name">
<span class="class-attribs">
</span>
<span class="class-type">class</span>
<b>YAHOO.widget.AutoComplete</b>
</div>
<div class="class-extends">
</div>
</div>
<div class="meta">
</div>
<!-- ======== QUICK LINKS ======== -->
<div class="quick-links">
<strong>Quick Links:</strong>&nbsp;
<a href="#field_summary">Field Summary</a>
|
<a href="#constructor_summary">Constructor Summary</a>
|
<a href="#methodSummary">Method Summary</a> |
<a href="#methodDetails">Method Details</a>
</div>
<!-- ======== END QUICK LINKS ======== -->
<!-- ======== NESTED CLASS SUMMARY ======== -->
<!-- ======== END NESTED CLASS SUMMARY ======== -->
<!-- =========== FIELD SUMMARY =========== -->
<div class="section field summaries">
<h3><a name="field_summary">Field Summary</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<div class="content">
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<td class="flags">boolean</td>
<td class="spec">
<code>
<a href="#allowBrowserAutocomplete">allowBrowserAutocomplete</a>
</code>
<div class="description">
Whether or not to allow browsers to cache user-typed input in the input
field.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">boolean</td>
<td class="spec">
<code>
<a href="#alwaysShowContainer">alwaysShowContainer</a>
</code>
<div class="description">
Whether or not the auto complete container should always be displayed.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">boolean</td>
<td class="spec">
<code>
<a href="#animHoriz">animHoriz</a>
</code>
<div class="description">
Whether or not to animate the expansion/collapse of the auto complete
container in the horizontal direction.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">number</td>
<td class="spec">
<code>
<a href="#animSpeed">animSpeed</a>
</code>
<div class="description">
Speed of container expand/collapse animation, in seconds.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">boolean</td>
<td class="spec">
<code>
<a href="#animVert">animVert</a>
</code>
<div class="description">
Whether or not to animate the expansion/collapse of the auto complete
container in the vertical direction.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">boolean</td>
<td class="spec">
<code>
<a href="#autoHighlight">autoHighlight</a>
</code>
<div class="description">
Whether or not the first item in the auto complete container should be
automatically highlighted on expand.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#containerCollapseEvent">containerCollapseEvent</a>
</code>
<div class="description">
Fired when the auto complete container is collapsed.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#containerExpandEvent">containerExpandEvent</a>
</code>
<div class="description">
Fired when the auto complete container is expanded.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#dataErrorEvent">dataErrorEvent</a>
</code>
<div class="description">
Fired when the auto complete instance does not receive query results from the
data source due to an error.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#dataRequestEvent">dataRequestEvent</a>
</code>
<div class="description">
Fired when the auto complete instance makes a query to the data source.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#dataReturnEvent">dataReturnEvent</a>
</code>
<div class="description">
Fired when the auto complete instance receives query results from the data
source.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">object</td>
<td class="spec">
<code>
<a href="#dataSource">dataSource</a>
</code>
<div class="description">
The data source object that encapsulates the data used for auto completion.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">string or array</td>
<td class="spec">
<code>
<a href="#delimChar">delimChar</a>
</code>
<div class="description">
Query delimiter.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">boolean</td>
<td class="spec">
<code>
<a href="#forceSelection">forceSelection</a>
</code>
<div class="description">
Whether or not to force the user's selection to match one of the query
results.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">string</td>
<td class="spec">
<code>
<a href="#highlightClassName">highlightClassName</a>
</code>
<div class="description">
Class name of a highlighted item within the auto complete container.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#itemArrowFromEvent">itemArrowFromEvent</a>
</code>
<div class="description">
Fired when result item has been arrowed away from.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#itemArrowToEvent">itemArrowToEvent</a>
</code>
<div class="description">
Fired when result item has been arrowed to.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#itemMouseOutEvent">itemMouseOutEvent</a>
</code>
<div class="description">
Fired when result item has been moused out.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#itemMouseOverEvent">itemMouseOverEvent</a>
</code>
<div class="description">
Fired when result item has been moused over.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#itemSelectEvent">itemSelectEvent</a>
</code>
<div class="description">
Fired when an item is selected via mouse click, ENTER key, or TAB key.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">number</td>
<td class="spec">
<code>
<a href="#maxResultsDisplayed">maxResultsDisplayed</a>
</code>
<div class="description">
Maximum number of results to display in auto complete container.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">number</td>
<td class="spec">
<code>
<a href="#minQueryLength">minQueryLength</a>
</code>
<div class="description">
Number of characters that must be entered before querying for results.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">string</td>
<td class="spec">
<code>
<a href="#prehighlightClassName">prehighlightClassName</a>
</code>
<div class="description">
Class name of a pre-highlighted item within the auto complete container.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">number</td>
<td class="spec">
<code>
<a href="#queryDelay">queryDelay</a>
</code>
<div class="description">
Number of seconds to delay before submitting a query request.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#selectionEnforceEvent">selectionEnforceEvent</a>
</code>
<div class="description">
Fired if forceSelection is enabled and the user's input has been cleared
because it did not match one of the returned query results.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#textboxBlurEvent">textboxBlurEvent</a>
</code>
<div class="description">
Fired when the auto complete text input box loses focus.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#textboxFocusEvent">textboxFocusEvent</a>
</code>
<div class="description">
Fired when the auto complete text input box receives focus.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#textboxKeyEvent">textboxKeyEvent</a>
</code>
<div class="description">
Fired when the auto complete text input box receives key input.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">boolean</td>
<td class="spec">
<code>
<a href="#typeAhead">typeAhead</a>
</code>
<div class="description">
Whether or not the auto complete 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.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#typeAheadEvent">typeAheadEvent</a>
</code>
<div class="description">
Fired when the auto complete textbox has been prefilled by the type-ahead
feature.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">Object</td>
<td class="spec">
<code>
<a href="#unmatchedItemSelectEvent">unmatchedItemSelectEvent</a>
</code>
<div class="description">
Fired when an user selection does not match any of the displayed result items.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">boolean</td>
<td class="spec">
<code>
<a href="#useIFrame">useIFrame</a>
</code>
<div class="description">
Whether or not to use an iFrame to layer over Windows form elements in
IE.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">boolean</td>
<td class="spec">
<code>
<a href="#useShadow">useShadow</a>
</code>
<div class="description">
Whether or not the auto complete container should have a shadow.&nbsp;
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- =========== END FIELD SUMMARY =========== -->
<!-- ======== CONSTRUCTOR SUMMARY ======== -->
<div class="section contructor summaries">
<h3><a name="constructor_summary">Constructor Summary</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<div class="content">
<code class="spec">
<a href="YAHOO.widget.AutoComplete.html#YAHOO.widget.AutoComplete()">YAHOO.widget.AutoComplete</a>
</code>
<div class="description">
Class providing the customizable functionality of a plug-and-play DHTML
auto complete widget.&nbsp;
</div>
</div>
</div>
<!-- ======== END CONSTRUCTOR SUMMARY ======== -->
<!-- ========== METHOD SUMMARY =========== -->
<div class="section method summaries">
<h3><a name="methodSummary">Method Summary</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<div class="content">
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<td class="flags">string</td>
<td class="spec">
<code>
<a href="#formatResult">formatResult</a>
(&lt;object&gt; oResultItem, &lt;string&gt; sQuery)
</code>
<div class="description">
Overridable method that converts a result item object into HTML markup
for display.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">object or array</td>
<td class="spec">
<code>
<a href="#getListItemData">getListItemData</a>
(oListItem)
</code>
<div class="description">
Public accessor to the data held in an &lt;li&gt; element of the
auto complete container.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">array</td>
<td class="spec">
<code>
<a href="#getListItems">getListItems</a>
()
</code>
<div class="description">
Public accessor to the internal array of DOM &lt;li&gt; elements that
display query results within the auto complete container.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">void</td>
<td class="spec">
<code>
<a href="#sendQuery">sendQuery</a>
(&lt;string&gt; sQuery)
</code>
<div class="description">
Makes query request to the data source.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">void</td>
<td class="spec">
<code>
<a href="#setBody">setBody</a>
(sBody)
</code>
<div class="description">
Sets HTML markup for the auto complete container body.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">void</td>
<td class="spec">
<code>
<a href="#setFooter">setFooter</a>
(&lt;string&gt; sFooter)
</code>
<div class="description">
Sets HTML markup for the auto complete container footer.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">void</td>
<td class="spec">
<code>
<a href="#setHeader">setHeader</a>
(&lt;string&gt; sHeader)
</code>
<div class="description">
Sets HTML markup for the auto complete container header.&nbsp;
</div>
</td>
</tr>
<tr>
<td class="flags">string</td>
<td class="spec">
<code>
<a href="#toString">toString</a>
()
</code>
<div class="description">
Public accessor to the unique name of the auto complete instance.&nbsp;
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- ========== END METHOD SUMMARY =========== -->
<!-- ============ FIELD DETAIL START =========== -->
<div class="section field details">
<h3><a name="field_detail">Field Detail</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<div class="content">
<h4><a name="allowBrowserAutocomplete">allowBrowserAutocomplete</a></h4>
<div class="detail">
<code>
boolean
&nbsp;
<strong>allowBrowserAutocomplete</strong>
</code>
<div class="description">
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 auto complete 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.
Default: true.
</div>
</div>
<hr />
<h4><a name="alwaysShowContainer">alwaysShowContainer</a></h4>
<div class="detail">
<code>
boolean
&nbsp;
<strong>alwaysShowContainer</strong>
</code>
<div class="description">
Whether or not the auto complete container should always be displayed.
Enabling this feature prevents the toggling of the container to a collapsed
state. Default: false.
</div>
</div>
<hr />
<h4><a name="animHoriz">animHoriz</a></h4>
<div class="detail">
<code>
boolean
&nbsp;
<strong>animHoriz</strong>
</code>
<div class="description">
Whether or not to animate the expansion/collapse of the auto complete
container in the horizontal direction. Default: false.
</div>
</div>
<hr />
<h4><a name="animSpeed">animSpeed</a></h4>
<div class="detail">
<code>
number
&nbsp;
<strong>animSpeed</strong>
</code>
<div class="description">
Speed of container expand/collapse animation, in seconds. Default: 0.3.
</div>
</div>
<hr />
<h4><a name="animVert">animVert</a></h4>
<div class="detail">
<code>
boolean
&nbsp;
<strong>animVert</strong>
</code>
<div class="description">
Whether or not to animate the expansion/collapse of the auto complete
container in the vertical direction. Default: true.
</div>
</div>
<hr />
<h4><a name="autoHighlight">autoHighlight</a></h4>
<div class="detail">
<code>
boolean
&nbsp;
<strong>autoHighlight</strong>
</code>
<div class="description">
Whether or not the first item in the auto complete container should be
automatically highlighted on expand. Default: true.
</div>
</div>
<hr />
<h4><a name="containerCollapseEvent">containerCollapseEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>containerCollapseEvent</strong>
</code>
<div class="description">
Fired when the auto complete container is collapsed. If alwaysShowContainer is
enabled, then containerCollapseEvent will be fired when the container is
cleared of results. Subscribers receive the following array:<br>
- args[0] The auto complete object instance
</div>
</div>
<hr />
<h4><a name="containerExpandEvent">containerExpandEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>containerExpandEvent</strong>
</code>
<div class="description">
Fired when the auto complete container is expanded. If alwaysShowContainer is
enabled, then containerExpandEvent will be fired when the container is
populated with results. Subscribers receive the following array:<br>
- args[0] The auto complete object instance
</div>
</div>
<hr />
<h4><a name="dataErrorEvent">dataErrorEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>dataErrorEvent</strong>
</code>
<div class="description">
Fired when the auto complete instance does not receive query results from the
data source due to an error. Subscribers receive the following array:<br>
- args[0] The auto complete object instance
- args[1] The query string
</div>
</div>
<hr />
<h4><a name="dataRequestEvent">dataRequestEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>dataRequestEvent</strong>
</code>
<div class="description">
Fired when the auto complete instance makes a query to the data source.
Subscribers receive the following array:<br>
- args[0] The auto complete object instance
- args[1] The query string
</div>
</div>
<hr />
<h4><a name="dataReturnEvent">dataReturnEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>dataReturnEvent</strong>
</code>
<div class="description">
Fired when the auto complete instance receives query results from the data
source. Subscribers receive the following array:<br>
- args[0] The auto complete object instance
- args[1] The query string
- args[2] Results array
</div>
</div>
<hr />
<h4><a name="dataSource">dataSource</a></h4>
<div class="detail">
<code>
object
&nbsp;
<strong>dataSource</strong>
</code>
<div class="description">
The data source object that encapsulates the data used for auto completion.
This object should be an inherited object from YAHOO.widget.DataSource.
</div>
</div>
<hr />
<h4><a name="delimChar">delimChar</a></h4>
<div class="detail">
<code>
string or array
&nbsp;
<strong>delimChar</strong>
</code>
<div class="description">
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. Default: null.
</div>
</div>
<hr />
<h4><a name="forceSelection">forceSelection</a></h4>
<div class="detail">
<code>
boolean
&nbsp;
<strong>forceSelection</strong>
</code>
<div class="description">
Whether or not to force the user's selection to match one of the query
results. Enabling this feature essentially transforms the auto complete form
input field into a &lt;select&gt; field. This feature is not recommended
with delimiter character(s) defined. Default: false.
</div>
</div>
<hr />
<h4><a name="highlightClassName">highlightClassName</a></h4>
<div class="detail">
<code>
string
&nbsp;
<strong>highlightClassName</strong>
</code>
<div class="description">
Class name of a highlighted item within the auto complete container.
Default: "yui-ac-highlight".
</div>
</div>
<hr />
<h4><a name="itemArrowFromEvent">itemArrowFromEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>itemArrowFromEvent</strong>
</code>
<div class="description">
Fired when result item has been arrowed away from. Subscribers receive the
following array:<br>
- args[0] The auto complete object instance
- args[1] The &lt;li&gt; element item arrowed from
</div>
</div>
<hr />
<h4><a name="itemArrowToEvent">itemArrowToEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>itemArrowToEvent</strong>
</code>
<div class="description">
Fired when result item has been arrowed to. Subscribers receive the following
array:<br>
- args[0] The auto complete object instance
- args[1] The &lt;li&gt; element item arrowed to
</div>
</div>
<hr />
<h4><a name="itemMouseOutEvent">itemMouseOutEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>itemMouseOutEvent</strong>
</code>
<div class="description">
Fired when result item has been moused out. Subscribers receive the
following array:<br>
- args[0] The auto complete object instance
- args[1] The &lt;li&gt; element item moused from
</div>
</div>
<hr />
<h4><a name="itemMouseOverEvent">itemMouseOverEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>itemMouseOverEvent</strong>
</code>
<div class="description">
Fired when result item has been moused over. Subscribers receive the following
array:<br>
- args[0] The auto complete object instance
- args[1] The &lt;li&gt element item moused to
</div>
</div>
<hr />
<h4><a name="itemSelectEvent">itemSelectEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>itemSelectEvent</strong>
</code>
<div class="description">
Fired when an item is selected via mouse click, ENTER key, or TAB key.
Subscribers receive the following array:<br>
- args[0] The auto complete object instance
- args[1] The selected &lt;li&gt; element item
- args[2] The data returned for the item, either as an object, or mapped from the schema into an array
</div>
</div>
<hr />
<h4><a name="maxResultsDisplayed">maxResultsDisplayed</a></h4>
<div class="detail">
<code>
number
&nbsp;
<strong>maxResultsDisplayed</strong>
</code>
<div class="description">
Maximum number of results to display in auto complete container. Default: 10.
</div>
</div>
<hr />
<h4><a name="minQueryLength">minQueryLength</a></h4>
<div class="detail">
<code>
number
&nbsp;
<strong>minQueryLength</strong>
</code>
<div class="description">
Number of characters that must be entered before querying for results.
Default: 1.
</div>
</div>
<hr />
<h4><a name="prehighlightClassName">prehighlightClassName</a></h4>
<div class="detail">
<code>
string
&nbsp;
<strong>prehighlightClassName</strong>
</code>
<div class="description">
Class name of a pre-highlighted item within the auto complete container.
Default: null.
</div>
</div>
<hr />
<h4><a name="queryDelay">queryDelay</a></h4>
<div class="detail">
<code>
number
&nbsp;
<strong>queryDelay</strong>
</code>
<div class="description">
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.
Default: 0.5.
</div>
</div>
<hr />
<h4><a name="selectionEnforceEvent">selectionEnforceEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>selectionEnforceEvent</strong>
</code>
<div class="description">
Fired if forceSelection is enabled and the user's input has been cleared
because it did not match one of the returned query results. Subscribers
receive the following array:<br>
- args[0] The auto complete object instance
</div>
</div>
<hr />
<h4><a name="textboxBlurEvent">textboxBlurEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>textboxBlurEvent</strong>
</code>
<div class="description">
Fired when the auto complete text input box loses focus. Subscribers receive
an array of the following array:<br>
- args[0] The auto complete object instance
</div>
</div>
<hr />
<h4><a name="textboxFocusEvent">textboxFocusEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>textboxFocusEvent</strong>
</code>
<div class="description">
Fired when the auto complete text input box receives focus. Subscribers
receive the following array:<br>
- args[0] The auto complete object instance
</div>
</div>
<hr />
<h4><a name="textboxKeyEvent">textboxKeyEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>textboxKeyEvent</strong>
</code>
<div class="description">
Fired when the auto complete text input box receives key input. Subscribers
receive the following array:<br>
- args[0] The auto complete object instance
- args[1] The keycode number
</div>
</div>
<hr />
<h4><a name="typeAhead">typeAhead</a></h4>
<div class="detail">
<code>
boolean
&nbsp;
<strong>typeAhead</strong>
</code>
<div class="description">
Whether or not the auto complete 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. Default: false.
</div>
</div>
<hr />
<h4><a name="typeAheadEvent">typeAheadEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>typeAheadEvent</strong>
</code>
<div class="description">
Fired when the auto complete textbox has been prefilled by the type-ahead
feature. Subscribers receive the following array:<br>
- args[0] The auto complete object instance
- args[1] The query string
- args[2] The prefill string
</div>
</div>
<hr />
<h4><a name="unmatchedItemSelectEvent">unmatchedItemSelectEvent</a></h4>
<div class="detail">
<code>
Object
&nbsp;
<strong>unmatchedItemSelectEvent</strong>
</code>
<div class="description">
Fired when an 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. Subscribers receive the following array:<br>
- args[0] The auto complete object instance
- args[1] The user selection
</div>
</div>
<hr />
<h4><a name="useIFrame">useIFrame</a></h4>
<div class="detail">
<code>
boolean
&nbsp;
<strong>useIFrame</strong>
</code>
<div class="description">
Whether or not to use an iFrame to layer over Windows form elements in
IE. Set to true only when the auto complete 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). Default:false.
</div>
</div>
<hr />
<h4><a name="useShadow">useShadow</a></h4>
<div class="detail">
<code>
boolean
&nbsp;
<strong>useShadow</strong>
</code>
<div class="description">
Whether or not the auto complete container should have a shadow. Default:false.
</div>
</div>
<hr />
</div>
</div>
<!-- ============ FIELD DETAIL END =========== -->
<!-- ========= CONSTRUCTOR DETAIL START ======== -->
<div class="section constructor details">
<h3><a name="constructor_detail">Constructor Detail</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<div class="content">
<h4><a name="YAHOO.widget.AutoComplete()">YAHOO.widget.AutoComplete</a></h4>
<div class="detail">
<code>
<strong>YAHOO.widget.AutoComplete</strong>
()
</code>
<div class="description">
Class providing the customizable functionality of a plug-and-play DHTML
auto complete 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>
requires YAHOO.util.Dom Dom utility
requires YAHOO.util.Event Event utility
requires YAHOO.widget.DataSource Data source class
see YAHOO.util.Animation Animation utility
see JSON JSON library
<dl>
<dt>Parameters:</dt>
<dd>
<code>element</code> -
| string} inputEl DOM element reference or string ID of the auto complete input field
</dd>
<dd>
<code>element</code> -
| string} containerEl DOM element reference or string ID of the auto complete &lt;div&gt; container
</dd>
<dd>
<code>oDataSource</code> -
Instance of YAHOO.widget.DataSource for query/results
</dd>
<dd>
<code>oConfigs</code> -
Optional object literal of config params
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- ========= CONSTRUCTOR DETAIL END ======== -->
<!-- ============ METHOD DETAIL START ========== -->
<div class="section method details">
<h3><a name="methodDetails">Method Detail</a> <span class="top">[<a href="#top">top</a>]</span></h3>
<div class="content">
<h4><a name="formatResult">formatResult</a></h4>
<div class="detail">
<code>
string
<strong>formatResult</strong>
(&lt;object&gt; oResultItem, &lt;string&gt; sQuery)
</code>
<div class="description">
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.
<dl>
<dt>Parameters:</dt>
<dd>
<code>oResultItem</code> -
Result item object representing one query result
</dd>
<dd>
<code>sQuery</code> -
The current query string
</dd>
</dl>
<dl>
<dt>Returns:</dt>
<dd> HTML markup of formatted result data</dd>
</dl>
</div>
</div>
<hr />
<h4><a name="getListItemData">getListItemData</a></h4>
<div class="detail">
<code>
object or array
<strong>getListItemData</strong>
(oListItem)
</code>
<div class="description">
Public accessor to the data held in an &lt;li&gt; element of the
auto complete container.
<dl>
<dt>Returns:</dt>
<dd> Object or array of result data or null</dd>
</dl>
</div>
</div>
<hr />
<h4><a name="getListItems">getListItems</a></h4>
<div class="detail">
<code>
array
<strong>getListItems</strong>
()
</code>
<div class="description">
Public accessor to the internal array of DOM &lt;li&gt; elements that
display query results within the auto complete container.
<dl>
<dt>Returns:</dt>
<dd> Array of &lt;li&gt; elements within the auto complete container</dd>
</dl>
</div>
</div>
<hr />
<h4><a name="sendQuery">sendQuery</a></h4>
<div class="detail">
<code>
void
<strong>sendQuery</strong>
(&lt;string&gt; sQuery)
</code>
<div class="description">
Makes query request to the data source.
<dl>
<dt>Parameters:</dt>
<dd>
<code>sQuery</code> -
Query string.
</dd>
</dl>
</div>
</div>
<hr />
<h4><a name="setBody">setBody</a></h4>
<div class="detail">
<code>
void
<strong>setBody</strong>
(sBody)
</code>
<div class="description">
Sets HTML markup for the auto complete container body. This markup will be
inserted within a &lt;div&gt; tag with a class of "ac_bd".
<dl>
<dt>Parameters:</dt>
<dd>
<code>sHeader</code> -
HTML markup for container body
</dd>
</dl>
</div>
</div>
<hr />
<h4><a name="setFooter">setFooter</a></h4>
<div class="detail">
<code>
void
<strong>setFooter</strong>
(&lt;string&gt; sFooter)
</code>
<div class="description">
Sets HTML markup for the auto complete container footer. This markup will be
inserted within a &lt;div&gt; tag with a class of "ac_ft".
<dl>
<dt>Parameters:</dt>
<dd>
<code>sFooter</code> -
HTML markup for container footer
</dd>
</dl>
</div>
</div>
<hr />
<h4><a name="setHeader">setHeader</a></h4>
<div class="detail">
<code>
void
<strong>setHeader</strong>
(&lt;string&gt; sHeader)
</code>
<div class="description">
Sets HTML markup for the auto complete container header. This markup will be
inserted within a &lt;div&gt; tag with a class of "ac_hd".
<dl>
<dt>Parameters:</dt>
<dd>
<code>sHeader</code> -
HTML markup for container header
</dd>
</dl>
</div>
</div>
<hr />
<h4><a name="toString">toString</a></h4>
<div class="detail">
<code>
string
<strong>toString</strong>
()
</code>
<div class="description">
Public accessor to the unique name of the auto complete instance.
<dl>
<dt>Returns:</dt>
<dd> Unique name of the auto complete instance</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
<!-- ============ METHOD DETAIL END ========== -->
</div>
</div>
</div>
<!-- ========= END OF CLASS DATA ========= -->
<div id="footer">
<hr />
Copyright &copy; 2006 Yahoo! Inc. All rights reserved.
<br />
Documentation generated by <a href="http://jsdoc.sourceforge.net/">JSDoc</a>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink