Example: AutoComplete - Basic XML Data (YUI Library)

# AutoComplete Widget :: Basic XML Data

### DataSource

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.

### AutoComplete

This AutoComplete instance uses only default configuration values.

## Yahoo! Search

### Sample Code

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 onsubmit="return YAHOO.example.ACXml.validateForm();"> <h2>Yahoo! Search</h2> <div id="ysearchautocomplete"> <input id="ysearchinput"> <div id="ysearchcontainer"></div> </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", ["Result", "Title"]); oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML; oACDS.queryMatchContains = true; oACDS.scriptQueryAppend = "results=100"; // Needed for YWS // Instantiate AutoComplete oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);