Example: AutoComplete - Basic JSON Data (YUI Library)

This example's DataSource instance points to Yahoo! Search Web Services, which returns JSON data via a simple PHP proxy. The DataSource schema will parse the data found in the object literal for fields named "Title", "Summary", and "Cache". In order for the Yahoo! Search application to return valid data, the DataSource property scriptQueryAppend is used to pass along all the required query parameters, and the property queryMatchContains has been enabled.

To achieve the shrink-wrapped centered search module, not only have custom CSS been applied, but the the doBeforeExpandContainer method has also been customized to position the container directly below the input field.

Sample Code

CSS:

Markup:

JavaScript:

// 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"]
            oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["ResultSet.Result","Title"]);
            oACDS.queryMatchContains = true;
            oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS

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

AutoComplete Widget :: Basic JSON Data

Sample Code