autocomplete-debug.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

 * of the first result that the user has not yet 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;

/**
 * Enabling this feature prevents the toggling of the container to a collapsed state.
 * Setting to true does not automatically trigger the opening of the container.
 * Implementers are advised to pre-load the container with an explicit "sendQuery()" call.   
 *
 * @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;

/**
 * Whether or not the input field should be updated with selections.
 *
 * @property supressInputUpdate
 * @type Boolean
 * @default false
 */
YAHOO.widget.AutoComplete.prototype.suppressInputUpdate = false;

/**
 * For backward compatibility to pre-2.6.0 formatResults() signatures, setting
 * resultsTypeList to true will take each object literal result returned by
 * DataSource and flatten into an array.  
 *
 * @property resultTypeList
 * @type Boolean
 * @default true
 */
YAHOO.widget.AutoComplete.prototype.resultTypeList = true;

/**
 * For XHR DataSources, AutoComplete will automatically insert a "?" between the server URI and 
 * the "query" param/value pair. To prevent this behavior, implementers should
 * set this value to false. To more fully customize the query syntax, implementers
 * should override the generateRequest() method. 
 *
 * @property queryQuestionMark
 * @type Boolean
 * @default true
 */
YAHOO.widget.AutoComplete.prototype.queryQuestionMark = true;

/////////////////////////////////////////////////////////////////////////////
//
// 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 DOM reference to input element.
 *
 * @method getInputEl
 * @return {HTMLELement} DOM reference to input element.
 */
YAHOO.widget.AutoComplete.prototype.getInputEl = function() {
    return this._elTextbox;
};

 /**
 * Returns DOM reference to container element.
 *
 * @method getContainerEl
 * @return {HTMLELement} DOM reference to container element.
 */
YAHOO.widget.AutoComplete.prototype.getContainerEl = function() {
    return this._elContainer;
};

 /**
 * Returns true if widget instance is currently focused.
 *
 * @method isFocused
 * @return {Boolean} Returns true if widget instance is currently focused.
 */
YAHOO.widget.AutoComplete.prototype.isFocused = function() {
    return (this._bFocused === null) ? false : this._bFocused;
};

 /**
 * 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 &lt;ul&gt; element that displays query results within the results container.
 *
 * @method getListEl
 * @return {HTMLElement[]} Reference to &lt;ul&gt; element within the results container.
 */
YAHOO.widget.AutoComplete.prototype.getListEl = function() {
    return this._elList;
};

/**
 * Public accessor to the matching string associated with a given &lt;li&gt; result.
 *
 * @method getListItemMatch
 * @param elListItem {HTMLElement} Reference to &lt;LI&gt; element.
 * @return {String} Matching string.
 */
YAHOO.widget.AutoComplete.prototype.getListItemMatch = function(elListItem) {
    if(elListItem._sResultMatch) {
        return elListItem._sResultMatch;
    }
    else {
        return null;
    }
};

/**
 * Public accessor to the result data associated with a given &lt;li&gt; result.
 *
 * @method getListItemData
 * @param elListItem {HTMLElement} Reference to &lt;LI&gt; element.
 * @return {Object} Result data.
 */
YAHOO.widget.AutoComplete.prototype.getListItemData = function(elListItem) {
    if(elListItem._oResultData) {
        return elListItem._oResultData;
    }
    else {
        return null;
    }
};

/**
 * Public accessor to the index of the associated with a given &lt;li&gt; result.
 *
 * @method getListItemIndex
 * @param elListItem {HTMLElement} Reference to &lt;LI&gt; element.
 * @return {Number} Index.
 */
YAHOO.widget.AutoComplete.prototype.getListItemIndex = function(elListItem) {
    if(YAHOO.lang.isNumber(elListItem._nItemIndex)) {
        return elListItem._nItemIndex;
    }
    else {
        return null;
    }
};

/**
 * 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".
 *
 * @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 &lt;div&gt; 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 &lt;div&gt; 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;
        YAHOO.util.Event.purgeElement(elBody, true);
        if(sBody) {
            elBody.innerHTML = sBody;
            elBody.style.display = "block";
        }
        else {
            elBody.innerHTML = "";
            elBody.style.display = "none";
        }
        this._elList = null;
    }
};

/**
* A function that converts an AutoComplete query into a request value which is then
* passed to the DataSource's sendRequest method in order to retrieve data for 
* the query. By default, returns a String with the syntax: "query={query}"
* Implementers can customize this method for custom request syntaxes.
* 
* @method generateRequest
* @param sQuery {String} Query string
*/
YAHOO.widget.AutoComplete.prototype.generateRequest = function(sQuery) {
    var dataType = this.dataSource.dataType;
    
    // Transform query string in to a request for remote data
    // By default, local data doesn't need a transformation, just passes along the query as is.
    if(dataType === YAHOO.util.DataSourceBase.TYPE_XHR) {
        // By default, XHR GET requests look like "{scriptURI}?{scriptQueryParam}={sQuery}&{scriptQueryAppend}"
        if(!this.dataSource.connMethodPost) {
            sQuery = (this.queryQuestionMark ? "?" : "") + (this.dataSource.scriptQueryParam || "query") + "=" + sQuery + 
                (this.dataSource.scriptQueryAppend ? ("&" + this.dataSource.scriptQueryAppend) : "");        
        }
        // By default, XHR POST bodies are sent to the {scriptURI} like "{scriptQueryParam}={sQuery}&{scriptQueryAppend}"
        else {
            sQuery = (this.dataSource.scriptQueryParam || "query") + "=" + sQuery + 
                (this.dataSource.scriptQueryAppend ? ("&" + this.dataSource.scriptQueryAppend) : "");
        }
    }
    // By default, remote script node requests look like "{scriptURI}&{scriptCallbackParam}={callbackString}&{scriptQueryParam}={sQuery}&{scriptQueryAppend}"
    else if(dataType === YAHOO.util.DataSourceBase.TYPE_SCRIPTNODE) {
        sQuery = "&" + (this.dataSource.scriptQueryParam || "query") + "=" + sQuery + 
            (this.dataSource.scriptQueryAppend ? ("&" + this.dataSource.scriptQueryAppend) : "");    
    }
    
    return sQuery;
};

/**
 * Makes query request to the DataSource.
 *
 * @method sendQuery
 * @param sQuery {String} Query string.
 */
YAHOO.widget.AutoComplete.prototype.sendQuery = function(sQuery) {
    // Adjust programatically sent queries to look like they input by user
    // when delimiters are enabled
    var newQuery = (this.delimChar) ? this._elTextbox.value + sQuery : sQuery;
    this._sendQuery(newQuery);
};

/**
 * Collapses container.
 *
 * @method collapseContainer
 */
YAHOO.widget.AutoComplete.prototype.collapseContainer = function() {
    this._toggleContainer(false);
};

/**
 * Handles subset matching for when queryMatchSubset is enabled.
 *
 * @method getSubsetMatches
 * @param sQuery {String} Query string.
 * @return {Object} oParsedResponse or null. 
 */
YAHOO.widget.AutoComplete.prototype.getSubsetMatches = function(sQuery) {
    var subQuery, oCachedResponse, subRequest;
    // Loop through substrings of each cached element's query property...
    for(var i = sQuery.length; i >= this.minQueryLength ; i--) {
        subRequest = this.generateRequest(sQuery.substr(0,i));
        this.dataRequestEvent.fire(this, subQuery, subRequest);
        YAHOO.log("Searching for query subset \"" + subQuery + "\" in cache", "info", this.toString());
        
        // If a substring of the query is found in the cache
        oCachedResponse = this.dataSource.getCachedResponse(subRequest);
        if(oCachedResponse) {
            YAHOO.log("Found match for query subset \"" + subQuery + "\": " + YAHOO.lang.dump(oCachedResponse), "info", this.toString());
            return this.filterResults.apply(this.dataSource, [sQuery, oCachedResponse, oCachedResponse, {scope:this}]);
        }