webgui/www/extras/yui/docs/YAHOO.widget.AutoComplete.html
2008-03-25 16:13:25 +00:00

4404 lines
222 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>API: autocomplete YAHOO.widget.AutoComplete (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="assets/api.css">
<script type="text/javascript" src="assets/api-js"></script>
<script type="text/javascript" src="assets/ac-js"></script>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<a href="http://developer.yahoo.com/yui/"><h1>Yahoo! UI Library</h1></a>
<h3>AutoComplete Widget&nbsp; <span class="subtitle">2.5.1</span></h3>
<p>
<a href="./index.html">Yahoo! UI Library</a>
&gt; <a href="./module_autocomplete.html">autocomplete</a>
&gt; YAHOO.widget.AutoComplete
</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form name="yui-classopts-form">
<span id="classopts"><input type="checkbox" name="showprivate" id="showprivate" /> Show Private</span>
<span id="classopts"><input type="checkbox" name="showprotected" id="showprotected" /> Show Protected</span>
</form>
<h2>
Class <b>YAHOO.widget.AutoComplete</b>
<span class="extends">
</span>
<span class="extends">
</span>
</code>
</h2>
<!-- class tree goes here -->
<div class="summary 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>
<div class="section constructor details">
<h3 id="constructor">Constructor</h3>
<div class="content">
<div class="detail">
<strong>YAHOO.widget.AutoComplete</strong>
<code>
(
elInput
,
elContainer
,
oDataSource
,
oConfigs
)
</code>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>elInput
&lt;HTMLElement&gt;
</code>
DOM element reference of an input field.
</dd>
<dd>
<code>elInput
&lt;String&gt;
</code>
String ID of an input field.
</dd>
<dd>
<code>elContainer
&lt;HTMLElement&gt;
</code>
DOM element reference of an existing DIV.
</dd>
<dd>
<code>elContainer
&lt;String&gt;
</code>
String ID of an existing DIV.
</dd>
<dd>
<code>oDataSource
&lt;YAHOO.widget.DataSource&gt;
</code>
DataSource instance.
</dd>
<dd>
<code>oConfigs
&lt;Object&gt;
</code>
(optional) Object literal of configuration params.
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="section field details">
<h3 id="properties">Properties</h3>
<div class="content">
<div class="private">
<h4><a name="property__aListItems">_aListItems</a>
<code>- private HTMLElement[]</code>
</h4>
<div class="detail">
<div class="description">
Array of &lt;li&gt; elements references that contain query results within the
results container.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__bContainerOpen">_bContainerOpen</a>
<code>- private Boolean</code>
</h4>
<div class="detail">
<div class="description">
Whether or not the results container is currently open.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__bFocused">_bFocused</a>
<code>- private Boolean</code>
</h4>
<div class="detail">
<div class="description">
Whether or not the input field is currently in focus. If query results come back
but the user has already moved on, do not proceed with auto complete behavior.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__bItemSelected">_bItemSelected</a>
<code>- private Boolean</code>
</h4>
<div class="detail">
<div class="description">
Whether or not an item has been selected since the container was populated
with results. Reset to false by _populateList, and set to true when item is
selected.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__bOverContainer">_bOverContainer</a>
<code>- private Boolean</code>
</h4>
<div class="detail">
<div class="description">
Whether or not the mouse is currently over the results
container. This is necessary in order to prevent clicks on container items
from being text input field blur events.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__elBody">_elBody</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
Reference to body element within content element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__elContainer">_elContainer</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
Container DOM element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__elContent">_elContent</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
Reference to content element within container element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__elFooter">_elFooter</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
Reference to footer element within content element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__elHeader">_elHeader</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
Reference to header element within content element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__elIFrame">_elIFrame</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
Reference to iframe element within container element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__elShadow">_elShadow</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
Reference to shadow element within container element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__elTextbox">_elTextbox</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
Text input field DOM element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__iFrameSrc">_iFrameSrc</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Src to iFrame used when useIFrame = true. Supports implementations over SSL
as well.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__maxResultsDisplayed">_maxResultsDisplayed</a>
<code>- private Number</code>
</h4>
<div class="detail">
<div class="description">
Internal count of &lt;li&gt; elements displayed and hidden in results container.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__nDelayID">_nDelayID</a>
<code>- private Number</code>
</h4>
<div class="detail">
<div class="description">
Delay timeout ID.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__nDisplayedItems">_nDisplayedItems</a>
<code>- private Number</code>
</h4>
<div class="detail">
<div class="description">
Number of &lt;li&gt; elements currently displayed in results container.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__nIndex">_nIndex</a>
<code>- private Number</code>
</h4>
<div class="detail">
<div class="description">
Internal class variable to index multiple AutoComplete instances.
</div>
</div>
<div class="default">
Default Value: 0
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__nKeyCode">_nKeyCode</a>
<code>- private Number</code>
</h4>
<div class="detail">
<div class="description">
Key code of the last key pressed in textbox.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__oAnim">_oAnim</a>
<code>- private Boolean</code>
</h4>
<div class="detail">
<div class="description">
Animation instance for container expand/collapse.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__oCurItem">_oCurItem</a>
<code>- private HTMLElement</code>
</h4>
<div class="detail">
<div class="description">
Pointer to the currently highlighted &lt;li&gt; element in the container.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__queryInterval">_queryInterval</a>
<code>- private Object</code>
</h4>
<div class="detail">
<div class="description">
For users typing via certain IMEs, queries must be triggered by intervals,
since key events yet supported across all browsers for all IMEs.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__sCurQuery">_sCurQuery</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Current query string
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__sName">_sName</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Name of AutoComplete instance.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__sSavedQuery">_sSavedQuery</a>
<code>- private String</code>
</h4>
<div class="detail">
<div class="description">
Past queries this session (for saving delimited queries).
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_allowBrowserAutocomplete">allowBrowserAutocomplete</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<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 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>
<div class="default">
Default Value: true
</div>
<hr />
</div>
<div class="">
<h4><a name="property_alwaysShowContainer">alwaysShowContainer</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
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>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="property_animHoriz">animHoriz</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Whether or not to animate the expansion/collapse of the results container in the
horizontal direction.
</div>
</div>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="property_animSpeed">animSpeed</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
Speed of container expand/collapse animation, in seconds..
</div>
</div>
<div class="default">
Default Value: 0.3
</div>
<hr />
</div>
<div class="">
<h4><a name="property_animVert">animVert</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Whether or not to animate the expansion/collapse of the results container in the
vertical direction.
</div>
</div>
<div class="default">
Default Value: true
</div>
<hr />
</div>
<div class="">
<h4><a name="property_autoHighlight">autoHighlight</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Whether or not the first item in results container should be automatically highlighted
on expand.
</div>
</div>
<div class="default">
Default Value: true
</div>
<hr />
</div>
<div class="">
<h4><a name="property_dataSource">dataSource</a>
<code>- YAHOO.widget.DataSource</code>
</h4>
<div class="detail">
<div class="description">
The DataSource object that encapsulates the data used for auto completion.
This object should be an inherited object from YAHOO.widget.DataSource.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_delimChar">delimChar</a>
<code>- String | String[]</code>
</h4>
<div class="detail">
<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.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_forceSelection">forceSelection</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<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 input field into a
&lt;select&gt; field. This feature is not recommended with delimiter character(s)
defined.
</div>
</div>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="property_highlightClassName">highlightClassName</a>
<code>- String</code>
</h4>
<div class="detail">
<div class="description">
Class name of a highlighted item within results container.
</div>
</div>
<div class="default">
Default Value: "yui-ac-highlight"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_maxResultsDisplayed">maxResultsDisplayed</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
Maximum number of results to display in results container.
</div>
</div>
<div class="default">
Default Value: 10
</div>
<hr />
</div>
<div class="">
<h4><a name="property_minQueryLength">minQueryLength</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
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>
<div class="default">
Default Value: 1
</div>
<hr />
</div>
<div class="">
<h4><a name="property_prehighlightClassName">prehighlightClassName</a>
<code>- String</code>
</h4>
<div class="detail">
<div class="description">
Class name of a pre-highlighted item within results container.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_queryDelay">queryDelay</a>
<code>- Number</code>
</h4>
<div class="detail">
<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.
Implementers should take care when setting this value very low (i.e., less
than 0.2) with low latency DataSources and the typeAhead feature enabled, as
fast typers may see unexpected behavior.
</div>
</div>
<div class="default">
Default Value: 0.2
</div>
<hr />
</div>
<div class="">
<h4><a name="property_typeAhead">typeAhead</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
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>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="property_useIFrame">useIFrame</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
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>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="property_useShadow">useShadow</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Whether or not the results container should have a shadow.
</div>
</div>
<div class="default">
Default Value: false
</div>
<hr />
</div>
</div>
</div>
<div class="section method details">
<h3 id="methods">Methods</h3>
<div class="content">
<div class="private">
<h4>
<a name="method___initProps">__initProps</a></h4>
<div class="detail">
<code>
private
void
<strong>__initProps</strong>
(
)
</code>
<div class="description">
Updates and validates latest public config properties.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__cancelIntervalDetection">_cancelIntervalDetection</a></h4>
<div class="detail">
<code>
private
void
<strong>_cancelIntervalDetection</strong>
(
oSelf
)
</code>
<div class="description">
Cancels text input detection by intervals.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__clearSelection">_clearSelection</a></h4>
<div class="detail">
<code>
private
void
<strong>_clearSelection</strong>
(
)
</code>
<div class="description">
When forceSelection is true and the user attempts
leave the text input box without selecting an item from the query results,
the user selection is cleared.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__enableIntervalDetection">_enableIntervalDetection</a></h4>
<div class="detail">
<code>
private
void
<strong>_enableIntervalDetection</strong>
(
)
</code>
<div class="description">
Enables query triggers based on text input detection by intervals (rather
than by key events).
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__initContainer">_initContainer</a></h4>
<div class="detail">
<code>
private
void
<strong>_initContainer</strong>
(
)
</code>
<div class="description">
Initializes the results container once at object creation
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__initContainerHelpers">_initContainerHelpers</a></h4>
<div class="detail">
<code>
private
void
<strong>_initContainerHelpers</strong>
(
)
</code>
<div class="description">
Initializes the results container helpers if they are enabled and do
not exist
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__initList">_initList</a></h4>
<div class="detail">
<code>
private
void
<strong>_initList</strong>
(
)
</code>
<div class="description">
Clears out contents of container body and creates up to
YAHOO.widget.AutoComplete#maxResultsDisplayed &lt;li&gt; elements in an
&lt;ul&gt; element.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__initListItem">_initListItem</a></h4>
<div class="detail">
<code>
private
void
<strong>_initListItem</strong>
(
oItem
,
nItemIndex
)
</code>
<div class="description">
Initializes each &lt;li&gt; element in the container list.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oItem &lt;HTMLElement&gt;</code>
The &lt;li&gt; DOM element.
</dd>
<dd>
<code>nItemIndex &lt;Number&gt;</code>
The index of the element.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__isIgnoreKey">_isIgnoreKey</a></h4>
<div class="detail">
<code>
private
Boolean
<strong>_isIgnoreKey</strong>
(
nKeycode
)
</code>
<div class="description">
Whether or not key is functional or should be ignored. Note that the right
arrow key is NOT an ignored key since it triggers queries for certain intl
charsets.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>nKeycode &lt;Number&gt;</code>
Code of key pressed.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>True if key should be ignored, false otherwise.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__jumpSelection">_jumpSelection</a></h4>
<div class="detail">
<code>
private
void
<strong>_jumpSelection</strong>
(
)
</code>
<div class="description">
If an item is highlighted in the container, the right arrow key jumps to the
end of the textbox and selects the highlighted item, otherwise the container
is closed.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__moveSelection">_moveSelection</a></h4>
<div class="detail">
<code>
private
void
<strong>_moveSelection</strong>
(
nKeyCode
)
</code>
<div class="description">
Triggered by up and down arrow keys, changes the current highlighted
&lt;li&gt; element item. Scrolls container if necessary.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>nKeyCode &lt;Number&gt;</code>
Code of key pressed.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onContainerMouseout">_onContainerMouseout</a></h4>
<div class="detail">
<code>
private
void
<strong>_onContainerMouseout</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles container mouseout events.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The mouseout event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onContainerMouseover">_onContainerMouseover</a></h4>
<div class="detail">
<code>
private
void
<strong>_onContainerMouseover</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles container mouseover events.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The mouseover event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onContainerResize">_onContainerResize</a></h4>
<div class="detail">
<code>
private
void
<strong>_onContainerResize</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles container resize events.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The resize event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onContainerScroll">_onContainerScroll</a></h4>
<div class="detail">
<code>
private
void
<strong>_onContainerScroll</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles container scroll events.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The scroll event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onIMEDetected">_onIMEDetected</a></h4>
<div class="detail">
<code>
private
void
<strong>_onIMEDetected</strong>
(
oSelf
)
</code>
<div class="description">
Enables interval detection for Korean IME support.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onItemMouseclick">_onItemMouseclick</a></h4>
<div class="detail">
<code>
private
void
<strong>_onItemMouseclick</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles &lt;li&gt; element click events in the container.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The click event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onItemMouseout">_onItemMouseout</a></h4>
<div class="detail">
<code>
private
void
<strong>_onItemMouseout</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles &lt;li&gt; element mouseout events in the container.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The mouseout event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onItemMouseover">_onItemMouseover</a></h4>
<div class="detail">
<code>
private
void
<strong>_onItemMouseover</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles &lt;li&gt; element mouseover events in the container.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The mouseover event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onTextboxBlur">_onTextboxBlur</a></h4>
<div class="detail">
<code>
private
void
<strong>_onTextboxBlur</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles text input box losing focus.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The focus event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onTextboxFocus">_onTextboxFocus</a></h4>
<div class="detail">
<code>
private
void
<strong>_onTextboxFocus</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles text input box receiving focus.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The focus event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onTextboxKeyDown">_onTextboxKeyDown</a></h4>
<div class="detail">
<code>
private
void
<strong>_onTextboxKeyDown</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles textbox keydown events of functional keys, mainly for UI behavior.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The keydown event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onTextboxKeyPress">_onTextboxKeyPress</a></h4>
<div class="detail">
<code>
private
void
<strong>_onTextboxKeyPress</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles textbox keypress events.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The keypress event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onTextboxKeyUp">_onTextboxKeyUp</a></h4>
<div class="detail">
<code>
private
void
<strong>_onTextboxKeyUp</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles textbox keyup events that trigger queries.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The keyup event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__onWindowUnload">_onWindowUnload</a></h4>
<div class="detail">
<code>
private
void
<strong>_onWindowUnload</strong>
(
v
,
oSelf
)
</code>
<div class="description">
Handles window unload event.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>v &lt;HTMLEvent&gt;</code>
The unload event.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__populateList">_populateList</a></h4>
<div class="detail">
<code>
private
void
<strong>_populateList</strong>
(
sQuery
,
aResults
,
oSelf
)
</code>
<div class="description">
Populates the array of &lt;li&gt; elements in the container with query
results. This method is passed to YAHOO.widget.DataSource#getResults as a
callback function so results from the DataSource instance are returned to the
AutoComplete instance.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>sQuery &lt;String&gt;</code>
The query string.
</dd>
<dd>
<code>aResults &lt;Object[]&gt;</code>
An array of query result objects from the DataSource.
</dd>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__selectItem">_selectItem</a></h4>
<div class="detail">
<code>
private
void
<strong>_selectItem</strong>
(
oItem
)
</code>
<div class="description">
Selects a result item from the container
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oItem &lt;HTMLElement&gt;</code>
The selected &lt;li&gt; element item.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__selectText">_selectText</a></h4>
<div class="detail">
<code>
private
void
<strong>_selectText</strong>
(
elTextbox
,
nStart
,
nEnd
)
</code>
<div class="description">
Selects text in the input field.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>elTextbox &lt;HTMLElement&gt;</code>
Text input box element in which to select text.
</dd>
<dd>
<code>nStart &lt;Number&gt;</code>
Starting index of text string to select.
</dd>
<dd>
<code>nEnd &lt;Number&gt;</code>
Ending index of text selection.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__sendQuery">_sendQuery</a></h4>
<div class="detail">
<code>
private
void
<strong>_sendQuery</strong>
(
sQuery
)
</code>
<div class="description">
Makes query request to the DataSource.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>sQuery &lt;String&gt;</code>
Query string.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__textMatchesOption">_textMatchesOption</a></h4>
<div class="detail">
<code>
private
HTMLElement
<strong>_textMatchesOption</strong>
(
)
</code>
<div class="description">
Whether or not user-typed value in the text input box matches any of the
query results.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
HTMLElement
</code></dt>
<dd>Matching list item element if user-input text matches
a result, null otherwise.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__toggleContainer">_toggleContainer</a></h4>
<div class="detail">
<code>
private
void
<strong>_toggleContainer</strong>
(
bShow
)
</code>
<div class="description">
Animates expansion or collapse of the container.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>bShow &lt;Boolean&gt;</code>
True if container should be expanded, false if container should be collapsed
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__toggleContainerHelpers">_toggleContainerHelpers</a></h4>
<div class="detail">
<code>
private
void
<strong>_toggleContainerHelpers</strong>
(
bShow
)
</code>
<div class="description">
Syncs results container with its helpers.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>bShow &lt;Boolean&gt;</code>
True if container is expanded, false if collapsed
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__toggleHighlight">_toggleHighlight</a></h4>
<div class="detail">
<code>
private
void
<strong>_toggleHighlight</strong>
(
oNewItem
,
sType
)
</code>
<div class="description">
Toggles the highlight on or off for an item in the container, and also cleans
up highlighting of any previous item.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oNewItem &lt;HTMLElement&gt;</code>
The &lt;li&gt; element item to receive highlight behavior.
</dd>
<dd>
<code>sType &lt;String&gt;</code>
Type "mouseover" will toggle highlight on, and "mouseout" will toggle highlight off.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__togglePrehighlight">_togglePrehighlight</a></h4>
<div class="detail">
<code>
private
void
<strong>_togglePrehighlight</strong>
(
oNewItem
,
sType
)
</code>
<div class="description">
Toggles the pre-highlight on or off for an item in the container.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oNewItem &lt;HTMLElement&gt;</code>
The &lt;li&gt; element item to receive highlight behavior.
</dd>
<dd>
<code>sType &lt;String&gt;</code>
Type "mouseover" will toggle highlight on, and "mouseout" will toggle highlight off.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__typeAhead">_typeAhead</a></h4>
<div class="detail">
<code>
private
void
<strong>_typeAhead</strong>
(
oItem
,
sQuery
)
</code>
<div class="description">
Updates in the text input box with the first query result as the user types,
selecting the substring that the user has not typed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oItem &lt;HTMLElement&gt;</code>
The &lt;li&gt; element item whose data populates the input field.
</dd>
<dd>
<code>sQuery &lt;String&gt;</code>
Query string.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__updateValue">_updateValue</a></h4>
<div class="detail">
<code>
private
void
<strong>_updateValue</strong>
(
oItem
)
</code>
<div class="description">
Updates the text input box value with selected query result. If a delimiter
has been defined, then the value gets appended with the delimiter.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oItem &lt;HTMLElement&gt;</code>
The &lt;li&gt; element item with which to update the value.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_destroy">destroy</a></h4>
<div class="detail">
<code>
void
<strong>destroy</strong>
(
)
</code>
<div class="description">
Nulls out the entire AutoComplete instance and related objects, removes attached
event listeners, and clears out DOM elements inside the container. After
calling this method, the instance reference should be expliclitly nulled by
implementer, as in myDataTable = null. Use with caution!
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_doBeforeExpandContainer">doBeforeExpandContainer</a></h4>
<div class="detail">
<code>
Boolean
<strong>doBeforeExpandContainer</strong>
(
elTextbox
,
elContainer
,
sQuery
,
aResults
)
</code>
<div class="description">
Overridable method called before container expands allows implementers to access data
and DOM elements.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>elTextbox &lt;HTMLElement&gt;</code>
The text input box.
</dd>
<dd>
<code>elContainer &lt;HTMLElement&gt;</code>
The container element.
</dd>
<dd>
<code>sQuery &lt;String&gt;</code>
The query string.
</dd>
<dd>
<code>aResults &lt;Object[]&gt;</code>
An array of query results.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>Return true to continue expanding container, false to cancel the expand.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_doBeforeSendQuery">doBeforeSendQuery</a></h4>
<div class="detail">
<code>
String
<strong>doBeforeSendQuery</strong>
(
sQuery
)
</code>
<div class="description">
Overridable method gives implementers access to the query before it gets sent.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>sQuery &lt;String&gt;</code>
Query string.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
String
</code></dt>
<dd>Query string.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_formatResult">formatResult</a></h4>
<div class="detail">
<code>
String
<strong>formatResult</strong>
(
oResultItem
,
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.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oResultItem &lt;Object&gt;</code>
Result item representing one query result. Data is held in an array.
</dd>
<dd>
<code>sQuery &lt;String&gt;</code>
The current query string.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
String
</code></dt>
<dd>HTML markup of formatted result data.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getListItemData">getListItemData</a></h4>
<div class="detail">
<code>
Object | Object[]
<strong>getListItemData</strong>
(
)
</code>
<div class="description">
Public accessor to the data held in an &lt;li&gt; element of the
results container.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
Object | Object[]
</code></dt>
<dd>Object or array of result data or null</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getListItems">getListItems</a></h4>
<div class="detail">
<code>
HTMLElement[]
<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 results container.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
HTMLElement[]
</code></dt>
<dd>Array of &lt;li&gt; elements within the results container.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_isContainerOpen">isContainerOpen</a></h4>
<div class="detail">
<code>
Boolean
<strong>isContainerOpen</strong>
(
)
</code>
<div class="description">
Returns true if container is in an expanded state, false otherwise.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>Returns true if container is in an expanded state, false otherwise.</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_sendQuery">sendQuery</a></h4>
<div class="detail">
<code>
void
<strong>sendQuery</strong>
(
sQuery
)
</code>
<div class="description">
Makes query request to the DataSource.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>sQuery &lt;String&gt;</code>
Query string.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_setBody">setBody</a></h4>
<div class="detail">
<code>
void
<strong>setBody</strong>
(
sBody
)
</code>
<div class="description">
Sets HTML markup for the results container body. This markup will be
inserted within a &lt;div&gt; tag with a class of "yui-ac-bd".
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>sBody &lt;String&gt;</code>
HTML markup for results container body.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_setFooter">setFooter</a></h4>
<div class="detail">
<code>
void
<strong>setFooter</strong>
(
sFooter
)
</code>
<div class="description">
Sets HTML markup for the results container footer. This markup will be
inserted within a &lt;div&gt; tag with a class of "yui-ac-ft".
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>sFooter &lt;String&gt;</code>
HTML markup for results container footer.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_setHeader">setHeader</a></h4>
<div class="detail">
<code>
void
<strong>setHeader</strong>
(
sHeader
)
</code>
<div class="description">
Sets HTML markup for the results container header. This markup will be
inserted within a &lt;div&gt; tag with a class of "yui-ac-hd".
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>sHeader &lt;String&gt;</code>
HTML markup for results container header.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_toString">toString</a></h4>
<div class="detail">
<code>
String
<strong>toString</strong>
(
)
</code>
<div class="description">
Public accessor to the unique name of the AutoComplete instance.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
String
</code></dt>
<dd>Unique name of the AutoComplete instance.</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section method details">
<h3 id="events">Events</h3>
<div class="content">
<div class="private">
<h4>
<a name="event__sLastTextboxValue">_sLastTextboxValue</a></h4>
<div class="detail">
<code>
private
<strong>_sLastTextboxValue</strong>
(
)
</code>
<div class="description">
Internal tracker to last known textbox value, used to determine whether or not
to trigger a query via interval for certain IME users.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_containerCollapseEvent">containerCollapseEvent</a></h4>
<div class="detail">
<code>
<strong>containerCollapseEvent</strong>
(
oSelf
)
</code>
<div class="description">
Fired when the results container is collapsed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_containerExpandEvent">containerExpandEvent</a></h4>
<div class="detail">
<code>
<strong>containerExpandEvent</strong>
(
oSelf
)
</code>
<div class="description">
Fired when the results container is expanded.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_dataErrorEvent">dataErrorEvent</a></h4>
<div class="detail">
<code>
<strong>dataErrorEvent</strong>
(
oSelf
,
sQuery
)
</code>
<div class="description">
Fired when the AutoComplete instance does not receive query results from the
DataSource due to an error.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>sQuery &lt;String&gt;</code>
The query string.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_dataRequestEvent">dataRequestEvent</a></h4>
<div class="detail">
<code>
<strong>dataRequestEvent</strong>
(
oSelf
,
sQuery
)
</code>
<div class="description">
Fired when the AutoComplete instance makes a query to the DataSource.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>sQuery &lt;String&gt;</code>
The query string.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_dataReturnEvent">dataReturnEvent</a></h4>
<div class="detail">
<code>
<strong>dataReturnEvent</strong>
(
oSelf
,
sQuery
,
aResults
)
</code>
<div class="description">
Fired when the AutoComplete instance receives query results from the data
source.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>sQuery &lt;String&gt;</code>
The query string.
</dd>
<dd>
<code>aResults &lt;Object[]&gt;</code>
Results array.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_itemArrowFromEvent">itemArrowFromEvent</a></h4>
<div class="detail">
<code>
<strong>itemArrowFromEvent</strong>
(
oSelf
,
elItem
)
</code>
<div class="description">
Fired when result item has been arrowed away from.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>elItem &lt;HTMLElement&gt;</code>
The &lt;li&gt; element item arrowed from.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_itemArrowToEvent">itemArrowToEvent</a></h4>
<div class="detail">
<code>
<strong>itemArrowToEvent</strong>
(
oSelf
,
elItem
)
</code>
<div class="description">
Fired when result item has been arrowed to.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>elItem &lt;HTMLElement&gt;</code>
The &lt;li&gt; element item arrowed to.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_itemMouseOutEvent">itemMouseOutEvent</a></h4>
<div class="detail">
<code>
<strong>itemMouseOutEvent</strong>
(
oSelf
,
elItem
)
</code>
<div class="description">
Fired when result item has been moused out.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>elItem &lt;HTMLElement&gt;</code>
The &lt;li&gt; element item moused from.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_itemMouseOverEvent">itemMouseOverEvent</a></h4>
<div class="detail">
<code>
<strong>itemMouseOverEvent</strong>
(
oSelf
,
elItem
)
</code>
<div class="description">
Fired when result item has been moused over.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>elItem &lt;HTMLElement&gt;</code>
The &lt;li&gt element item moused to.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_itemSelectEvent">itemSelectEvent</a></h4>
<div class="detail">
<code>
<strong>itemSelectEvent</strong>
(
oSelf
,
elItem
,
oData
)
</code>
<div class="description">
Fired when an item is selected via mouse click, ENTER key, or TAB key.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>elItem &lt;HTMLElement&gt;</code>
The selected &lt;li&gt; element item.
</dd>
<dd>
<code>oData &lt;Object&gt;</code>
The data returned for the item, either as an object,
or mapped from the schema into an array.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_selectionEnforceEvent">selectionEnforceEvent</a></h4>
<div class="detail">
<code>
<strong>selectionEnforceEvent</strong>
(
oSelf
)
</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.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_textboxBlurEvent">textboxBlurEvent</a></h4>
<div class="detail">
<code>
<strong>textboxBlurEvent</strong>
(
oSelf
)
</code>
<div class="description">
Fired when the input field loses focus.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_textboxFocusEvent">textboxFocusEvent</a></h4>
<div class="detail">
<code>
<strong>textboxFocusEvent</strong>
(
oSelf
)
</code>
<div class="description">
Fired when the input field receives focus.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_textboxKeyEvent">textboxKeyEvent</a></h4>
<div class="detail">
<code>
<strong>textboxKeyEvent</strong>
(
oSelf
,
nKeycode
)
</code>
<div class="description">
Fired when the input field receives key input.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>nKeycode &lt;Number&gt;</code>
The keycode number.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_typeAheadEvent">typeAheadEvent</a></h4>
<div class="detail">
<code>
<strong>typeAheadEvent</strong>
(
oSelf
,
sQuery
,
sPrefill
)
</code>
<div class="description">
Fired when the input field has been prefilled by the type-ahead
feature.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
<dd>
<code>sQuery &lt;String&gt;</code>
The query string.
</dd>
<dd>
<code>sPrefill &lt;String&gt;</code>
The prefill string.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_unmatchedItemSelectEvent">unmatchedItemSelectEvent</a></h4>
<div class="detail">
<code>
<strong>unmatchedItemSelectEvent</strong>
(
oSelf
)
</code>
<div class="description">
Fired when a user selection does not match any of the displayed result items.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>oSelf &lt;YAHOO.widget.AutoComplete&gt;</code>
The AutoComplete instance.
</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div class="module">
<h4>Modules</h4>
<ul class="content">
<li class=""><a href="module_animation.html">animation</a></li>
<li class="selected"><a href="module_autocomplete.html">autocomplete</a></li>
<li class=""><a href="module_button.html">button</a></li>
<li class=""><a href="module_calendar.html">calendar</a></li>
<li class=""><a href="module_charts.html">charts</a></li>
<li class=""><a href="module_colorpicker.html">colorpicker</a></li>
<li class=""><a href="module_connection.html">connection</a></li>
<li class=""><a href="module_container.html">container</a></li>
<li class=""><a href="module_cookie.html">cookie</a></li>
<li class=""><a href="module_datasource.html">datasource</a></li>
<li class=""><a href="module_datatable.html">datatable</a></li>
<li class=""><a href="module_dom.html">dom</a></li>
<li class=""><a href="module_dragdrop.html">dragdrop</a></li>
<li class=""><a href="module_editor.html">editor</a></li>
<li class=""><a href="module_element.html">element</a></li>
<li class=""><a href="module_event.html">event</a></li>
<li class=""><a href="module_get.html">get</a></li>
<li class=""><a href="module_history.html">history</a></li>
<li class=""><a href="module_imagecropper.html">imagecropper</a></li>
<li class=""><a href="module_imageloader.html">imageloader</a></li>
<li class=""><a href="module_json.html">json</a></li>
<li class=""><a href="module_layout.html">layout</a></li>
<li class=""><a href="module_logger.html">logger</a></li>
<li class=""><a href="module_menu.html">menu</a></li>
<li class=""><a href="module_profiler.html">profiler</a></li>
<li class=""><a href="module_profilerviewer.html">profilerviewer</a></li>
<li class=""><a href="module_resize.html">resize</a></li>
<li class=""><a href="module_selector.html">selector</a></li>
<li class=""><a href="module_slider.html">slider</a></li>
<li class=""><a href="module_tabview.html">tabview</a></li>
<li class=""><a href="module_treeview.html">treeview</a></li>
<li class=""><a href="module_uploader.html">uploader</a></li>
<li class=""><a href="module_yahoo.html">yahoo</a></li>
<li class=""><a href="module_yuiloader.html">yuiloader</a></li>
<li class=""><a href="module_yuitest.html">yuitest</a></li>
</ul>
</div>
<div class="module">
<h4>Classes</h4>
<ul class="content">
<li class="selected"><a href="YAHOO.widget.AutoComplete.html">YAHOO.widget.AutoComplete</a></li>
<li class=""><a href="YAHOO.widget.DataSource.html">YAHOO.widget.DataSource</a></li>
<li class=""><a href="YAHOO.widget.DS_JSArray.html">YAHOO.widget.DS_JSArray</a></li>
<li class=""><a href="YAHOO.widget.DS_JSFunction.html">YAHOO.widget.DS_JSFunction</a></li>
<li class=""><a href="YAHOO.widget.DS_ScriptNode.html">YAHOO.widget.DS_ScriptNode</a></li>
<li class=""><a href="YAHOO.widget.DS_XHR.html">YAHOO.widget.DS_XHR</a></li>
</ul>
</div>
<div class="module">
<h4>Files</h4>
<ul class="content">
<li class=""><a href="AutoComplete.js.html">AutoComplete.js</a></li>
<li class=""><a href="DataSource.js.html">DataSource.js</a></li>
</ul>
</div>
<div class="module">
<h4>Properties</h4>
<ul class="content">
<li class="private"><a href="#property__aListItems">_aListItems</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__bContainerOpen">_bContainerOpen</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__bFocused">_bFocused</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__bItemSelected">_bItemSelected</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__bOverContainer">_bOverContainer</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__elBody">_elBody</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__elContainer">_elContainer</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__elContent">_elContent</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__elFooter">_elFooter</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__elHeader">_elHeader</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__elIFrame">_elIFrame</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__elShadow">_elShadow</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__elTextbox">_elTextbox</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__iFrameSrc">_iFrameSrc</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__maxResultsDisplayed">_maxResultsDisplayed</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__nDelayID">_nDelayID</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__nDisplayedItems">_nDisplayedItems</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__nIndex">_nIndex</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__nKeyCode">_nKeyCode</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__oAnim">_oAnim</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__oCurItem">_oCurItem</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__queryInterval">_queryInterval</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__sCurQuery">_sCurQuery</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__sName">_sName</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class="private"><a href="#property__sSavedQuery">_sSavedQuery</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_allowBrowserAutocomplete">allowBrowserAutocomplete</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_alwaysShowContainer">alwaysShowContainer</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_animHoriz">animHoriz</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_animSpeed">animSpeed</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_animVert">animVert</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_autoHighlight">autoHighlight</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_dataSource">dataSource</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_delimChar">delimChar</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_forceSelection">forceSelection</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_highlightClassName">highlightClassName</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_maxResultsDisplayed">maxResultsDisplayed</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_minQueryLength">minQueryLength</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_prehighlightClassName">prehighlightClassName</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_queryDelay">queryDelay</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_typeAhead">typeAhead</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_useIFrame">useIFrame</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
<li class=""><a href="#property_useShadow">useShadow</a>
<!--<code>&lt;Boolean&gt;</code>-->
</li>
</ul>
</div>
<div class="module">
<h4>Methods</h4>
<ul class="content">
<li class="private"><!--<code>void</code>-->
<a href="#method___initProps">__initProps</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__cancelIntervalDetection">_cancelIntervalDetection</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__clearSelection">_clearSelection</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__enableIntervalDetection">_enableIntervalDetection</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__initContainer">_initContainer</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__initContainerHelpers">_initContainerHelpers</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__initList">_initList</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__initListItem">_initListItem</a>
</li>
<li class="private"><!--<code>Boolean</code>-->
<a href="#method__isIgnoreKey">_isIgnoreKey</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__jumpSelection">_jumpSelection</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__moveSelection">_moveSelection</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onContainerMouseout">_onContainerMouseout</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onContainerMouseover">_onContainerMouseover</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onContainerResize">_onContainerResize</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onContainerScroll">_onContainerScroll</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onIMEDetected">_onIMEDetected</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onItemMouseclick">_onItemMouseclick</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onItemMouseout">_onItemMouseout</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onItemMouseover">_onItemMouseover</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onTextboxBlur">_onTextboxBlur</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onTextboxFocus">_onTextboxFocus</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onTextboxKeyDown">_onTextboxKeyDown</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onTextboxKeyPress">_onTextboxKeyPress</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onTextboxKeyUp">_onTextboxKeyUp</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__onWindowUnload">_onWindowUnload</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__populateList">_populateList</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__selectItem">_selectItem</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__selectText">_selectText</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__sendQuery">_sendQuery</a>
</li>
<li class="private"><!--<code>HTMLElement</code>-->
<a href="#method__textMatchesOption">_textMatchesOption</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__toggleContainer">_toggleContainer</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__toggleContainerHelpers">_toggleContainerHelpers</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__toggleHighlight">_toggleHighlight</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__togglePrehighlight">_togglePrehighlight</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__typeAhead">_typeAhead</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__updateValue">_updateValue</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_destroy">destroy</a>
</li>
<li class=""><!--<code>Boolean</code>-->
<a href="#method_doBeforeExpandContainer">doBeforeExpandContainer</a>
</li>
<li class=""><!--<code>String</code>-->
<a href="#method_doBeforeSendQuery">doBeforeSendQuery</a>
</li>
<li class=""><!--<code>String</code>-->
<a href="#method_formatResult">formatResult</a>
</li>
<li class=""><!--<code>Object | Object[]</code>-->
<a href="#method_getListItemData">getListItemData</a>
</li>
<li class=""><!--<code>HTMLElement[]</code>-->
<a href="#method_getListItems">getListItems</a>
</li>
<li class=""><!--<code>Boolean</code>-->
<a href="#method_isContainerOpen">isContainerOpen</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_sendQuery">sendQuery</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_setBody">setBody</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_setFooter">setFooter</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_setHeader">setHeader</a>
</li>
<li class=""><!--<code>String</code>-->
<a href="#method_toString">toString</a>
</li>
</ul>
</div>
<div class="module">
<h4>Events</h4>
<ul class="content">
<li class="private">
<a href="#event__sLastTextboxValue">_sLastTextboxValue</a>
</li>
<li class="">
<a href="#event_containerCollapseEvent">containerCollapseEvent</a>
</li>
<li class="">
<a href="#event_containerExpandEvent">containerExpandEvent</a>
</li>
<li class="">
<a href="#event_dataErrorEvent">dataErrorEvent</a>
</li>
<li class="">
<a href="#event_dataRequestEvent">dataRequestEvent</a>
</li>
<li class="">
<a href="#event_dataReturnEvent">dataReturnEvent</a>
</li>
<li class="">
<a href="#event_itemArrowFromEvent">itemArrowFromEvent</a>
</li>
<li class="">
<a href="#event_itemArrowToEvent">itemArrowToEvent</a>
</li>
<li class="">
<a href="#event_itemMouseOutEvent">itemMouseOutEvent</a>
</li>
<li class="">
<a href="#event_itemMouseOverEvent">itemMouseOverEvent</a>
</li>
<li class="">
<a href="#event_itemSelectEvent">itemSelectEvent</a>
</li>
<li class="">
<a href="#event_selectionEnforceEvent">selectionEnforceEvent</a>
</li>
<li class="">
<a href="#event_textboxBlurEvent">textboxBlurEvent</a>
</li>
<li class="">
<a href="#event_textboxFocusEvent">textboxFocusEvent</a>
</li>
<li class="">
<a href="#event_textboxKeyEvent">textboxKeyEvent</a>
</li>
<li class="">
<a href="#event_typeAheadEvent">typeAheadEvent</a>
</li>
<li class="">
<a href="#event_unmatchedItemSelectEvent">unmatchedItemSelectEvent</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright &copy; 2007 Yahoo! Inc. All rights reserved.
</div>
</div>
</body>
</html>