This DataSource instance points to Yahoo! Search Web Services, via a simple PHP proxy. The DataSource schema is defined for JSON data. In order to be compatible with the Yahoo! Search application, the DataSource's queryMatchContains is set to true, and the scriptQueryAppend has been defined to pass in additional arguments.
This AutoComplete instance uses only default configuration values.
CSS:
#ysearchmod {position:relative;text-align:center;z-index:9050;} #ysearchautocomplete {position:relative;} #ysearchinput {position:relative;width:20em;height:1.4em;} #ysearchcontainer {position:absolute;left:0;top:1.7em;display:inline;} #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;} #ysearchsubmit {position:relative;}
Markup:
<!-- AutoComplete begins --> <div id="ysearchmod"> <form> <span>Yahoo! Search</span> <span id="ysearchautocomplete"> <input id="ysearchinput"> <div id="ysearchcontainer"></div> </span> <input id="ysearchsubmit" type="submit" value="Submit Query"> </form> </div> <!-- AutoComplete ends -->
JavaScript:
// Instantiate data source 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", "Summary", "Cache"]); oACDS.queryMatchContains = true; oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS // Instantiate auto complete oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);