YUI Library Examples: AutoComplete Control: Use AutoComplete to access flat-file data from a web service

Sample Code

CSS:

Markup:

JavaScript:

YAHOO.example.ACFlatData = new function(){
    // Define a custom formatter function
    this.fnCustomFormatter = function(oResultItem, sQuery) {
        var sKey = oResultItem[0];
        var nQuantity = oResultItem[1];
        var sKeyQuery = sKey.substr(0, sQuery.length);
        var sKeyRemainder = sKey.substr(sQuery.length);
        var aMarkup = ["<div class='sample-result'><div class='sample-quantity'>",
            nQuantity,
            "</div><span class='sample-query'>",
            sKeyQuery,
            "</span>",
            sKeyRemainder,
            "</div>"];
        return (aMarkup.join(""));
    };

// Instantiate one XHR DataSource and define schema as an array:
    //     ["Record Delimiter",
    //     "Field Delimiter"]
    this.oACDS = new YAHOO.widget.DS_XHR("assets/php/ysearch_flat.php", ["\n", "\t"]);
    this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
    this.oACDS.maxCacheEntries = 60;
    this.oACDS.queryMatchSubset = true;

// Instantiate first AutoComplete
    var myInput = document.getElementById('ysearchinput0');
    var myContainer = document.getElementById('ysearchcontainer0');
    this.oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,this.oACDS);
    this.oAutoComp0.delimChar = ";";
    this.oAutoComp0.queryDelay = 1;
    this.oAutoComp0.formatResult = this.fnCustomFormatter;

// Instantiate second AutoComplete
    this.oAutoComp1 = new YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', this.oACDS);
    this.oAutoComp1.delimChar = ";";
    this.oAutoComp1.formatResult = this.fnCustomFormatter;

// Instantiate third AutoComplete
    this.oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', this.oACDS);
    this.oAutoComp2.queryDelay = 0;
    this.oAutoComp2.delimChar = ";";
    this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
    this.oAutoComp2.formatResult = this.fnCustomFormatter;
};

YUI Library Examples: AutoComplete Control: Use AutoComplete to access flat-file data from a web service

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources:

YUI Library Examples: AutoComplete Control: Use AutoComplete to access flat-file data from a web service

AutoComplete Control: Use AutoComplete to access flat-file data from a web service

Sample Search (1 sec query delay):

Sample Search (0.2 sec query delay):

Sample Search (0 sec query delay):

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources: