YUI Library Examples: AutoComplete Control: Proxyless AutoComplete pointing to the Yahoo! Search API

Sample Code

CSS:

Markup:

JavaScript:

YAHOO.example.ACScriptNode = new function(){
    // Instantiate an Script Node 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_ScriptNode("http://search.yahooapis.com/AudioSearchService/V1/artistSearch?appid=YahooDemo&output=json", ["ResultSet.Result","Name","Thumbnail"]);
    this.oACDS.scriptQueryParam = "artist";

// Instantiate AutoComplete
    this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS);
    this.oAutoComp.queryDelay = 0;
    this.oAutoComp.formatResult = function(oResultItem, sQuery) {
        var img = "", nonimg = "";
        var oThumbnail = oResultItem[1];
        if(oThumbnail && (oThumbnail !== "")) {
            img = "<img src=\""+ oThumbnail.Url + "\">";
        }
        else {
            img = "<span class=\"img\"><span class=\"imgtext\">N/A</span></span>";
        }
        return "<div class=\"result\">" + img + " <span class=\"name\">" + oResultItem[0] + "</span></div>";
    };

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

YUI Library Examples: AutoComplete Control: Proxyless AutoComplete pointing to the Yahoo! Search API

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources:

YUI Library Examples: AutoComplete Control: Proxyless AutoComplete pointing to the Yahoo! Search API

AutoComplete Control: Proxyless AutoComplete pointing to the Yahoo! Search API

Yahoo! Audio Search:

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources: