Yahoo! UI Library > autocomplete > AutoComplete.js (source view)
/**
* The AutoComplete control provides the front-end logic for text-entry suggestion and
* completion functionality.
*
* @module autocomplete
* @requires yahoo, dom, event, datasource
* @optional animation, connection, get
* @namespace YAHOO.widget
* @title AutoComplete Widget
*/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/**
* 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>
*
* @class AutoComplete
* @constructor
* @param elInput {HTMLElement} DOM element reference of an input field.
* @param elInput {String} String ID of an input field.
* @param elContainer {HTMLElement} DOM element reference of an existing DIV.
* @param elContainer {String} String ID of an existing DIV.
* @param oDataSource {YAHOO.widget.DataSource} DataSource instance.
* @param oConfigs {Object} (optional) Object literal of configuration params.
*/
YAHOO.widget.AutoComplete = function(elInput,elContainer,oDataSource,oConfigs) {
if(elInput && elContainer && oDataSource) {
// Validate DataSource
if(oDataSource instanceof YAHOO.widget.DataSource) {
this.dataSource = oDataSource;
}
else {
YAHOO.log("Could not instantiate AutoComplete due to an invalid DataSource", "error", this.toString());
return;
}
// Validate input element
if(YAHOO.util.Dom.inDocument(elInput)) {
if(YAHOO.lang.isString(elInput)) {
this._sName = "instance" + YAHOO.widget.AutoComplete._nIndex + " " + elInput;
this._elTextbox = document.getElementById(elInput);
}
else {
this._sName = (elInput.id) ?
"instance" + YAHOO.widget.AutoComplete._nIndex + " " + elInput.id:
"instance" + YAHOO.widget.AutoComplete._nIndex;
this._elTextbox = elInput;
}
YAHOO.util.Dom.addClass(this._elTextbox, "yui-ac-input");
}
else {
YAHOO.log("Could not instantiate AutoComplete due to an invalid input element", "error", this.toString());
return;
}
// Validate container element
if(YAHOO.util.Dom.inDocument(elContainer)) {
if(YAHOO.lang.isString(elContainer)) {
this._elContainer = document.getElementById(elContainer);
}
else {
this._elContainer = elContainer;
}
if(this._elContainer.style.display == "none") {
YAHOO.log("The container may not display properly if display is set to \"none\" in CSS", "warn", this.toString());
}
// For skinning
var elParent = this._elContainer.parentNode;
var elTag = elParent.tagName.toLowerCase();
if(elTag == "div") {
YAHOO.util.Dom.addClass(elParent, "yui-ac");
}
else {
YAHOO.log("Could not find the wrapper element for skinning", "warn", this.toString());
}
}
else {
YAHOO.log("Could not instantiate AutoComplete due to an invalid container element", "error", this.toString());
return;
}
// Set any config params passed in to override defaults
if(oConfigs && (oConfigs.constructor == Object)) {
for(var sConfig in oConfigs) {
if(sConfig) {
this[sConfig] = oConfigs[sConfig];
}
}
}
// Initialization sequence
this._initContainer();
this._initProps();
this._initList();
this._initContainerHelpers();
// Set up events
var oSelf = this;
var elTextbox = this._elTextbox;
// Events are actually for the content module within the container
var elContent = this._elContent;
// Dom events
YAHOO.util.Event.addListener(elTextbox,"keyup",oSelf._onTextboxKeyUp,oSelf);
YAHOO.util.Event.addListener(elTextbox,"keydown",oSelf._onTextboxKeyDown,oSelf);
YAHOO.util.Event.addListener(elTextbox,"focus",oSelf._onTextboxFocus,oSelf);
YAHOO.util.Event.addListener(elTextbox,"blur",oSelf._onTextboxBlur,oSelf);
YAHOO.util.Event.addListener(elContent,"mouseover",oSelf._onContainerMouseover,oSelf);
YAHOO.util.Event.addListener(elContent,"mouseout",oSelf._onContainerMouseout,oSelf);
YAHOO.util.Event.addListener(elContent,"scroll",oSelf._onContainerScroll,oSelf);
YAHOO.util.Event.addListener(elContent,"resize",oSelf._onContainerResize,oSelf);
YAHOO.util.Event.addListener(elTextbox,"keypress",oSelf._onTextboxKeyPress,oSelf);
YAHOO.util.Event.addListener(window,"unload",oSelf._onWindowUnload,oSelf);
// Custom events
this.textboxFocusEvent = new YAHOO.util.CustomEvent("textboxFocus", this);
this.textboxKeyEvent = new YAHOO.util.CustomEvent("textboxKey", this);
this.dataRequestEvent = new YAHOO.util.CustomEvent("dataRequest", this);
this.dataReturnEvent = new YAHOO.util.CustomEvent("dataReturn", this);
this.dataErrorEvent = new YAHOO.util.CustomEvent("dataError", this);
this.containerExpandEvent = new YAHOO.util.CustomEvent("containerExpand", this);
this.typeAheadEvent = new YAHOO.util.CustomEvent("typeAhead", this);
this.itemMouseOverEvent = new YAHOO.util.CustomEvent("itemMouseOver", this);
this.itemMouseOutEvent = new YAHOO.util.CustomEvent("itemMouseOut", this);
this.itemArrowToEvent = new YAHOO.util.CustomEvent("itemArrowTo", this);
this.itemArrowFromEvent = new YAHOO.util.CustomEvent("itemArrowFrom", this);
this.itemSelectEvent = new YAHOO.util.CustomEvent("itemSelect", this);
this.unmatchedItemSelectEvent = new YAHOO.util.CustomEvent("unmatchedItemSelect", this);
this.selectionEnforceEvent = new YAHOO.util.CustomEvent("selectionEnforce", this);
this.containerCollapseEvent = new YAHOO.util.CustomEvent("containerCollapse", this);
this.textboxBlurEvent = new YAHOO.util.CustomEvent("textboxBlur", this);
// Finish up
elTextbox.setAttribute("autocomplete","off");
YAHOO.widget.AutoComplete._nIndex++;
YAHOO.log("AutoComplete initialized","info",this.toString());
}
// Required arguments were not found
else {
YAHOO.log("Could not instantiate AutoComplete due invalid arguments", "error", this.toString());
}
};
/////////////////////////////////////////////////////////////////////////////
//
// Public member variables
//
/////////////////////////////////////////////////////////////////////////////
/**
* The DataSource object that encapsulates the data used for auto completion.
* This object should be an inherited object from YAHOO.widget.DataSource.
*
* @property dataSource
* @type YAHOO.widget.DataSource
*/
YAHOO.widget.AutoComplete.prototype.dataSource = null;
/**
* 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.
*
* @property minQueryLength
* @type Number
* @default 1
*/
YAHOO.widget.AutoComplete.prototype.minQueryLength = 1;
/**
* Maximum number of results to display in results container.
*
* @property maxResultsDisplayed
* @type Number
* @default 10
*/
YAHOO.widget.AutoComplete.prototype.maxResultsDisplayed = 10;
/**
* 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.
*
* @property queryDelay
* @type Number
* @default 0.2
*/
YAHOO.widget.AutoComplete.prototype.queryDelay = 0.2;
/**
* Class name of a highlighted item within results container.
*
* @property highlightClassName
* @type String
* @default "yui-ac-highlight"
*/
YAHOO.widget.AutoComplete.prototype.highlightClassName = "yui-ac-highlight";
/**
* Class name of a pre-highlighted item within results container.
*
* @property prehighlightClassName
* @type String
*/
YAHOO.widget.AutoComplete.prototype.prehighlightClassName = null;
/**
* 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.
*
* @property delimChar
* @type String | String[]
*/
YAHOO.widget.AutoComplete.prototype.delimChar = null;
/**
* Whether or not the first item in results container should be automatically highlighted
* on expand.
*
* @property autoHighlight
* @type Boolean
* @default true
*/
YAHOO.widget.AutoComplete.prototype.autoHighlight = true;
/**
* 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.
*
* @property typeAhead
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.typeAhead = false;
/**
* Whether or not to animate the expansion/collapse of the results container in the
* horizontal direction.
*
* @property animHoriz
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.animHoriz = false;
/**
* Whether or not to animate the expansion/collapse of the results container in the
* vertical direction.
*
* @property animVert
* @type Boolean
* @default true
*/
YAHOO.widget.AutoComplete.prototype.animVert = true;
/**
* Speed of container expand/collapse animation, in seconds..
*
* @property animSpeed
* @type Number
* @default 0.3
*/
YAHOO.widget.AutoComplete.prototype.animSpeed = 0.3;
/**
* 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
* <select> field. This feature is not recommended with delimiter character(s)
* defined.
*
* @property forceSelection
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.forceSelection = false;
/**
* 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.
*
* @property allowBrowserAutocomplete
* @type Boolean
* @default true
*/
YAHOO.widget.AutoComplete.prototype.allowBrowserAutocomplete = true;
/**
* 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.
*
* @property alwaysShowContainer
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.alwaysShowContainer = false;
/**
* 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
* <select> field in IE and thus exposed to the IE z-index bug (i.e.,
* 5.5 < IE < 7).
*
* @property useIFrame
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.useIFrame = false;
/**
* Whether or not the results container should have a shadow.
*
* @property useShadow
* @type Boolean
* @default false
*/
YAHOO.widget.AutoComplete.prototype.useShadow = false;
/////////////////////////////////////////////////////////////////////////////
//
// Public methods
//
/////////////////////////////////////////////////////////////////////////////
/**
* Public accessor to the unique name of the AutoComplete instance.
*
* @method toString
* @return {String} Unique name of the AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.toString = function() {
return "AutoComplete " + this._sName;
};
/**
* Returns true if container is in an expanded state, false otherwise.
*
* @method isContainerOpen
* @return {Boolean} Returns true if container is in an expanded state, false otherwise.
*/
YAHOO.widget.AutoComplete.prototype.isContainerOpen = function() {
return this._bContainerOpen;
};
/**
* Public accessor to the internal array of DOM <li> elements that
* display query results within the results container.
*
* @method getListItems
* @return {HTMLElement[]} Array of <li> elements within the results container.
*/
YAHOO.widget.AutoComplete.prototype.getListItems = function() {
return this._aListItems;
};
/**
* Public accessor to the data held in an <li> element of the
* results container.
*
* @method getListItemData
* @return {Object | Object[]} Object or array of result data or null
*/
YAHOO.widget.AutoComplete.prototype.getListItemData = function(oListItem) {
if(oListItem._oResultData) {
return oListItem._oResultData;
}
else {
return false;
}
};
/**
* Sets HTML markup for the results container header. This markup will be
* inserted within a <div> tag with a class of "yui-ac-hd".
*
* @method setHeader
* @param sHeader {String} HTML markup for results container header.
*/
YAHOO.widget.AutoComplete.prototype.setHeader = function(sHeader) {
if(this._elHeader) {
var elHeader = this._elHeader;
if(sHeader) {
elHeader.innerHTML = sHeader;
elHeader.style.display = "block";
}
else {
elHeader.innerHTML = "";
elHeader.style.display = "none";
}
}
};
/**
* Sets HTML markup for the results container footer. This markup will be
* inserted within a <div> tag with a class of "yui-ac-ft".
*
* @method setFooter
* @param sFooter {String} HTML markup for results container footer.
*/
YAHOO.widget.AutoComplete.prototype.setFooter = function(sFooter) {
if(this._elFooter) {
var elFooter = this._elFooter;
if(sFooter) {
elFooter.innerHTML = sFooter;
elFooter.style.display = "block";
}
else {
elFooter.innerHTML = "";
elFooter.style.display = "none";
}
}
};
/**
* Sets HTML markup for the results container body. This markup will be
* inserted within a <div> tag with a class of "yui-ac-bd".
*
* @method setBody
* @param sBody {String} HTML markup for results container body.
*/
YAHOO.widget.AutoComplete.prototype.setBody = function(sBody) {
if(this._elBody) {
var elBody = this._elBody;
if(sBody) {
elBody.innerHTML = sBody;
elBody.style.display = "block";
elBody.style.display = "block";
}
else {
elBody.innerHTML = "";
elBody.style.display = "none";
}
this._maxResultsDisplayed = 0;
}
};
/**
* 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 <li> element tags in the container.
*
* @method formatResult
* @param oResultItem {Object} Result item representing one query result. Data is held in an array.
* @param sQuery {String} The current query string.
* @return {String} HTML markup of formatted result data.
*/
YAHOO.widget.AutoComplete.prototype.formatResult = function(oResultItem, sQuery) {
var sResult = oResultItem[0];
if(sResult) {
return sResult;
}
else {
return "";
}
};
/**
* Overridable method called before container expands allows implementers to access data
* and DOM elements.
*
* @method doBeforeExpandContainer
* @param elTextbox {HTMLElement} The text input box.
* @param elContainer {HTMLElement} The container element.
* @param sQuery {String} The query string.
* @param aResults {Object[]} An array of query results.
* @return {Boolean} Return true to continue expanding container, false to cancel the expand.
*/
YAHOO.widget.AutoComplete.prototype.doBeforeExpandContainer = function(elTextbox, elContainer, sQuery, aResults) {
return true;
};
/**
* Makes query request to the DataSource.
*
* @method sendQuery
* @param sQuery {String} Query string.
*/
YAHOO.widget.AutoComplete.prototype.sendQuery = function(sQuery) {
this._sendQuery(sQuery);
};
/**
* Overridable method gives implementers access to the query before it gets sent.
*
* @method doBeforeSendQuery
* @param sQuery {String} Query string.
* @return {String} Query string.
*/
YAHOO.widget.AutoComplete.prototype.doBeforeSendQuery = function(sQuery) {
return sQuery;
};
/**
* 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!
*
* @method destroy
*/
YAHOO.widget.AutoComplete.prototype.destroy = function() {
var instanceName = this.toString();
var elInput = this._elTextbox;
var elContainer = this._elContainer;
// Unhook custom events
this.textboxFocusEvent.unsubscribeAll();
this.textboxKeyEvent.unsubscribeAll();
this.dataRequestEvent.unsubscribeAll();
this.dataReturnEvent.unsubscribeAll();
this.dataErrorEvent.unsubscribeAll();
this.containerExpandEvent.unsubscribeAll();
this.typeAheadEvent.unsubscribeAll();
this.itemMouseOverEvent.unsubscribeAll();
this.itemMouseOutEvent.unsubscribeAll();
this.itemArrowToEvent.unsubscribeAll();
this.itemArrowFromEvent.unsubscribeAll();
this.itemSelectEvent.unsubscribeAll();
this.unmatchedItemSelectEvent.unsubscribeAll();
this.selectionEnforceEvent.unsubscribeAll();
this.containerCollapseEvent.unsubscribeAll();
this.textboxBlurEvent.unsubscribeAll();
// Unhook DOM events
YAHOO.util.Event.purgeElement(elInput, true);
YAHOO.util.Event.purgeElement(elContainer, true);
// Remove DOM elements
elContainer.innerHTML = "";
// Null out objects
for(var key in this) {
if(YAHOO.lang.hasOwnProperty(this, key)) {
this[key] = null;
}
}
YAHOO.log("AutoComplete instance destroyed: " + instanceName);
};
/////////////////////////////////////////////////////////////////////////////
//
// Public events
//
/////////////////////////////////////////////////////////////////////////////
/**
* Fired when the input field receives focus.
*
* @event textboxFocusEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.textboxFocusEvent = null;
/**
* Fired when the input field receives key input.
*
* @event textboxKeyEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param nKeycode {Number} The keycode number.
*/
YAHOO.widget.AutoComplete.prototype.textboxKeyEvent = null;
/**
* Fired when the AutoComplete instance makes a query to the DataSource.
*
* @event dataRequestEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param sQuery {String} The query string.
*/
YAHOO.widget.AutoComplete.prototype.dataRequestEvent = null;
/**
* Fired when the AutoComplete instance receives query results from the data
* source.
*
* @event dataReturnEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param sQuery {String} The query string.
* @param aResults {Object[]} Results array.
*/
YAHOO.widget.AutoComplete.prototype.dataReturnEvent = null;
/**
* Fired when the AutoComplete instance does not receive query results from the
* DataSource due to an error.
*
* @event dataErrorEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param sQuery {String} The query string.
*/
YAHOO.widget.AutoComplete.prototype.dataErrorEvent = null;
/**
* Fired when the results container is expanded.
*
* @event containerExpandEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.containerExpandEvent = null;
/**
* Fired when the input field has been prefilled by the type-ahead
* feature.
*
* @event typeAheadEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param sQuery {String} The query string.
* @param sPrefill {String} The prefill string.
*/
YAHOO.widget.AutoComplete.prototype.typeAheadEvent = null;
/**
* Fired when result item has been moused over.
*
* @event itemMouseOverEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The <li> element item moused to.
*/
YAHOO.widget.AutoComplete.prototype.itemMouseOverEvent = null;
/**
* Fired when result item has been moused out.
*
* @event itemMouseOutEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The <li> element item moused from.
*/
YAHOO.widget.AutoComplete.prototype.itemMouseOutEvent = null;
/**
* Fired when result item has been arrowed to.
*
* @event itemArrowToEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The <li> element item arrowed to.
*/
YAHOO.widget.AutoComplete.prototype.itemArrowToEvent = null;
/**
* Fired when result item has been arrowed away from.
*
* @event itemArrowFromEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The <li> element item arrowed from.
*/
YAHOO.widget.AutoComplete.prototype.itemArrowFromEvent = null;
/**
* Fired when an item is selected via mouse click, ENTER key, or TAB key.
*
* @event itemSelectEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @param elItem {HTMLElement} The selected <li> element item.
* @param oData {Object} The data returned for the item, either as an object,
* or mapped from the schema into an array.
*/
YAHOO.widget.AutoComplete.prototype.itemSelectEvent = null;
/**
* Fired when a user selection does not match any of the displayed result items.
*
* @event unmatchedItemSelectEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.unmatchedItemSelectEvent = null;
/**
* Fired if forceSelection is enabled and the user's input has been cleared
* because it did not match one of the returned query results.
*
* @event selectionEnforceEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.selectionEnforceEvent = null;
/**
* Fired when the results container is collapsed.
*
* @event containerCollapseEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.containerCollapseEvent = null;
/**
* Fired when the input field loses focus.
*
* @event textboxBlurEvent
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
*/
YAHOO.widget.AutoComplete.prototype.textboxBlurEvent = null;
/////////////////////////////////////////////////////////////////////////////
//
// Private member variables
//
/////////////////////////////////////////////////////////////////////////////
/**
* Internal class variable to index multiple AutoComplete instances.
*
* @property _nIndex
* @type Number
* @default 0
* @private
*/
YAHOO.widget.AutoComplete._nIndex = 0;
/**
* Name of AutoComplete instance.
*
* @property _sName
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._sName = null;
/**
* Text input field DOM element.
*
* @property _elTextbox
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._elTextbox = null;
/**
* Container DOM element.
*
* @property _elContainer
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._elContainer = null;
/**
* Reference to content element within container element.
*
* @property _elContent
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._elContent = null;
/**
* Reference to header element within content element.
*
* @property _elHeader
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._elHeader = null;
/**
* Reference to body element within content element.
*
* @property _elBody
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._elBody = null;
/**
* Reference to footer element within content element.
*
* @property _elFooter
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._elFooter = null;
/**
* Reference to shadow element within container element.
*
* @property _elShadow
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._elShadow = null;
/**
* Reference to iframe element within container element.
*
* @property _elIFrame
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._elIFrame = null;
/**
* 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.
*
* @property _bFocused
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._bFocused = true;
/**
* Animation instance for container expand/collapse.
*
* @property _oAnim
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._oAnim = null;
/**
* Whether or not the results container is currently open.
*
* @property _bContainerOpen
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._bContainerOpen = false;
/**
* 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.
*
* @property _bOverContainer
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._bOverContainer = false;
/**
* Array of <li> elements references that contain query results within the
* results container.
*
* @property _aListItems
* @type HTMLElement[]
* @private
*/
YAHOO.widget.AutoComplete.prototype._aListItems = null;
/**
* Number of <li> elements currently displayed in results container.
*
* @property _nDisplayedItems
* @type Number
* @private
*/
YAHOO.widget.AutoComplete.prototype._nDisplayedItems = 0;
/**
* Internal count of <li> elements displayed and hidden in results container.
*
* @property _maxResultsDisplayed
* @type Number
* @private
*/
YAHOO.widget.AutoComplete.prototype._maxResultsDisplayed = 0;
/**
* Current query string
*
* @property _sCurQuery
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._sCurQuery = null;
/**
* Past queries this session (for saving delimited queries).
*
* @property _sSavedQuery
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._sSavedQuery = null;
/**
* Pointer to the currently highlighted <li> element in the container.
*
* @property _oCurItem
* @type HTMLElement
* @private
*/
YAHOO.widget.AutoComplete.prototype._oCurItem = null;
/**
* 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.
*
* @property _bItemSelected
* @type Boolean
* @private
*/
YAHOO.widget.AutoComplete.prototype._bItemSelected = false;
/**
* Key code of the last key pressed in textbox.
*
* @property _nKeyCode
* @type Number
* @private
*/
YAHOO.widget.AutoComplete.prototype._nKeyCode = null;
/**
* Delay timeout ID.
*
* @property _nDelayID
* @type Number
* @private
*/
YAHOO.widget.AutoComplete.prototype._nDelayID = -1;
/**
* Src to iFrame used when useIFrame = true. Supports implementations over SSL
* as well.
*
* @property _iFrameSrc
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._iFrameSrc = "javascript:false;";
/**
* For users typing via certain IMEs, queries must be triggered by intervals,
* since key events yet supported across all browsers for all IMEs.
*
* @property _queryInterval
* @type Object
* @private
*/
YAHOO.widget.AutoComplete.prototype._queryInterval = null;
/**
* Internal tracker to last known textbox value, used to determine whether or not
* to trigger a query via interval for certain IME users.
*
* @event _sLastTextboxValue
* @type String
* @private
*/
YAHOO.widget.AutoComplete.prototype._sLastTextboxValue = null;
/////////////////////////////////////////////////////////////////////////////
//
// Private methods
//
/////////////////////////////////////////////////////////////////////////////
/**
* Updates and validates latest public config properties.
*
* @method __initProps
* @private
*/
YAHOO.widget.AutoComplete.prototype._initProps = function() {
// Correct any invalid values
var minQueryLength = this.minQueryLength;
if(!YAHOO.lang.isNumber(minQueryLength)) {
this.minQueryLength = 1;
}
var maxResultsDisplayed = this.maxResultsDisplayed;
if(!YAHOO.lang.isNumber(maxResultsDisplayed) || (maxResultsDisplayed < 1)) {
this.maxResultsDisplayed = 10;
}
var queryDelay = this.queryDelay;
if(!YAHOO.lang.isNumber(queryDelay) || (queryDelay < 0)) {
this.queryDelay = 0.2;
}
var delimChar = this.delimChar;
if(YAHOO.lang.isString(delimChar) && (delimChar.length > 0)) {
this.delimChar = [delimChar];
}
else if(!YAHOO.lang.isArray(delimChar)) {
this.delimChar = null;
}
var animSpeed = this.animSpeed;
if((this.animHoriz || this.animVert) && YAHOO.util.Anim) {
if(!YAHOO.lang.isNumber(animSpeed) || (animSpeed < 0)) {
this.animSpeed = 0.3;
}
if(!this._oAnim ) {
this._oAnim = new YAHOO.util.Anim(this._elContent, {}, this.animSpeed);
}
else {
this._oAnim.duration = this.animSpeed;
}
}
if(this.forceSelection && delimChar) {
YAHOO.log("The forceSelection feature has been enabled with delimChar defined.","warn", this.toString());
}
};
/**
* Initializes the results container helpers if they are enabled and do
* not exist
*
* @method _initContainerHelpers
* @private
*/
YAHOO.widget.AutoComplete.prototype._initContainerHelpers = function() {
if(this.useShadow && !this._elShadow) {
var elShadow = document.createElement("div");
elShadow.className = "yui-ac-shadow";
this._elShadow = this._elContainer.appendChild(elShadow);
}
if(this.useIFrame && !this._elIFrame) {
var elIFrame = document.createElement("iframe");
elIFrame.src = this._iFrameSrc;
elIFrame.frameBorder = 0;
elIFrame.scrolling = "no";
elIFrame.style.position = "absolute";
elIFrame.style.width = "100%";
elIFrame.style.height = "100%";
elIFrame.tabIndex = -1;
this._elIFrame = this._elContainer.appendChild(elIFrame);
}
};
/**
* Initializes the results container once at object creation
*
* @method _initContainer
* @private
*/
YAHOO.widget.AutoComplete.prototype._initContainer = function() {
YAHOO.util.Dom.addClass(this._elContainer, "yui-ac-container");
if(!this._elContent) {
// The elContent div helps size the iframe and shadow properly
var elContent = document.createElement("div");
elContent.className = "yui-ac-content";
elContent.style.display = "none";
this._elContent = this._elContainer.appendChild(elContent);
var elHeader = document.createElement("div");
elHeader.className = "yui-ac-hd";
elHeader.style.display = "none";
this._elHeader = this._elContent.appendChild(elHeader);
var elBody = document.createElement("div");
elBody.className = "yui-ac-bd";
this._elBody = this._elContent.appendChild(elBody);
var elFooter = document.createElement("div");
elFooter.className = "yui-ac-ft";
elFooter.style.display = "none";
this._elFooter = this._elContent.appendChild(elFooter);
}
else {
YAHOO.log("Could not initialize the container","warn",this.toString());
}
};
/**
* Clears out contents of container body and creates up to
* YAHOO.widget.AutoComplete#maxResultsDisplayed <li> elements in an
* <ul> element.
*
* @method _initList
* @private
*/
YAHOO.widget.AutoComplete.prototype._initList = function() {
this._aListItems = [];
while(this._elBody.hasChildNodes()) {
var oldListItems = this.getListItems();
if(oldListItems) {
for(var oldi = oldListItems.length-1; oldi >= 0; oldi--) {
oldListItems[oldi] = null;
}
}
this._elBody.innerHTML = "";
}
var oList = document.createElement("ul");
oList = this._elBody.appendChild(oList);
for(var i=0; i<this.maxResultsDisplayed; i++) {
var oItem = document.createElement("li");
oItem = oList.appendChild(oItem);
this._aListItems[i] = oItem;
this._initListItem(oItem, i);
}
this._maxResultsDisplayed = this.maxResultsDisplayed;
};
/**
* Initializes each <li> element in the container list.
*
* @method _initListItem
* @param oItem {HTMLElement} The <li> DOM element.
* @param nItemIndex {Number} The index of the element.
* @private
*/
YAHOO.widget.AutoComplete.prototype._initListItem = function(oItem, nItemIndex) {
var oSelf = this;
oItem.style.display = "none";
oItem._nItemIndex = nItemIndex;
oItem.mouseover = oItem.mouseout = oItem.onclick = null;
YAHOO.util.Event.addListener(oItem,"mouseover",oSelf._onItemMouseover,oSelf);
YAHOO.util.Event.addListener(oItem,"mouseout",oSelf._onItemMouseout,oSelf);
YAHOO.util.Event.addListener(oItem,"click",oSelf._onItemMouseclick,oSelf);
};
/**
* Enables interval detection for Korean IME support.
*
* @method _onIMEDetected
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @private
*/
YAHOO.widget.AutoComplete.prototype._onIMEDetected = function(oSelf) {
oSelf._enableIntervalDetection();
};
/**
* Enables query triggers based on text input detection by intervals (rather
* than by key events).
*
* @method _enableIntervalDetection
* @private
*/
YAHOO.widget.AutoComplete.prototype._enableIntervalDetection = function() {
var currValue = this._elTextbox.value;
var lastValue = this._sLastTextboxValue;
if(currValue != lastValue) {
this._sLastTextboxValue = currValue;
this._sendQuery(currValue);
}
};
/**
* Cancels text input detection by intervals.
*
* @method _cancelIntervalDetection
* @param oSelf {YAHOO.widget.AutoComplete} The AutoComplete instance.
* @private
*/
YAHOO.widget.AutoComplete.prototype._cancelIntervalDetection = function(oSelf) {
if(oSelf._queryInterval) {
clearInterval(oSelf._queryInterval);
}
};
/**
* 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.
*
* @method _isIgnoreKey
* @param nKeycode {Number} Code of key pressed.
* @return {Boolean} True if key should be ignored, false otherwise.
* @private
*/
YAHOO.widget.AutoComplete.prototype._isIgnoreKey = function(nKeyCode) {
if((nKeyCode == 9) || (nKeyCode == 13) || // tab, enter
(nKeyCode == 16) || (nKeyCode == 17) || // shift, ctl
(nKeyCode >= 18 && nKeyCode <= 20) || // alt,pause/break,caps lock
(nKeyCode == 27)