This DataSource instance points to Yahoo! Search Web Services, via a simple PHP proxy. The DataSource schema is defined for XML 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;padding:1em;} #ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/ #ysearchinput {position:absolute;width:100%;height:1.4em;} #ysearchcontainer {position:absolute;top:1.7em;width:100%;} #ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;} #ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;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> <h2>Yahoo! Search</h2> <div id="ysearchautocomplete"> <input id="ysearchinput"> <div id="ysearchcontainer"></div> </div> </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", ["Result", "Title"]); oACDS.responseType = oACDS.TYPE_XML; oACDS.queryMatchContains = true; oACDS.scriptQueryAppend = "results=100"; // Needed for YWS // Instantiate auto complete oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);