YUI Library Examples: AutoComplete Control: Use AutoComplete to access the Yahoo! Search JSON API

Sample Code

CSS:

Markup:

JavaScript:

YAHOO.example.ACJson = new function(){
    // Instantiate an XHR DataSource and define schema as an array:
    //     ["Multi-depth.object.notation.to.find.a.single.result.item",
    //     "Query Key",
    //     "Additional Param Name 1",
    //     ...
    //     "Additional Param Name n"]
    this.oACDS = new YAHOO.widget.DS_XHR("assets/php/ysearch_proxy.php", ["ResultSet.Result","Title"]);
    this.oACDS.queryMatchContains = true;
    this.oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS

// Instantiate AutoComplete
    this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS);
    this.oAutoComp.useShadow = true;
    this.oAutoComp.formatResult = function(oResultItem, sQuery) {
        return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
    };
    this.oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
        var pos = YAHOO.util.Dom.getXY(oTextbox);
        pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
        YAHOO.util.Dom.setXY(oContainer,pos);
        return true;
    };

// Stub for form validation
    this.validateForm = function() {
        // Validation code goes here
        return true;
    };
};

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: AutoComplete Control: Use AutoComplete to access the Yahoo! Search JSON API

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources: