Example: AutoComplete - Basic JSON Data (YUI Library)

# AutoComplete Widget :: Basic JSON Data

Yahoo! Search

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:

#ysearchmod {text-align:center;} #ysearchinput {width:20em;height:1.4em;} #ysearchcontainer {position:absolute;z-index:9050;} #ysearchcontainer .yui-ac-content {position:absolute;left:0;top:0;width:20em;border:1px solid #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;} #ysearchcontainer .yui-ac-shadow {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;} #ysearchcontainer ul {padding:5px 0;width:100%;} #ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;} #ysearchcontainer li.yui-ac-highlight {background:#ff0;}

Markup:

<!-- AutoComplete begins --> <div id="ysearchmod"> <form onsubmit="return YAHOO.example.ACJson.validateForm();"> <label>Yahoo! Search</label> <input id="ysearchinput"> <input id="ysearchsubmit" type="submit" value="Submit Query"> <div id="ysearchcontainer"></div> </form> </div> <!-- AutoComplete ends -->

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; };