Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: AutoComplete Control: Use AutoComplete to access the Yahoo! Search XML API

# AutoComplete Control: Use AutoComplete to access the Yahoo! Search XML API

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 property `queryMatchContains` is enabled, and the `scriptQueryAppend` has been defined to pass in additional arguments.

View example in new window.

### Yahoo! Search:

## Sample Code

CSS:

/* custom styles for this example */ #ysearchautocomplete { margin-bottom:2em;width:25em; }

Markup:

<form action="http://search.yahoo.com/search" onsubmit="return YAHOO.example.ACXml.validateForm();"> <h3>Yahoo! Search:</h3> <div id="ysearchautocomplete"> <input id="ysearchinput" type="text" name="p"> <div id="ysearchcontainer"></div> </div> </form>

JavaScript:

YAHOO.example.ACXml = new function(){ // 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"] this.oACDS = new YAHOO.widget.DS_XHR("assets/php/ysearch_proxy.php", ["Result", "Title"]); this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML; this.oACDS.queryMatchContains = true; this.oACDS.scriptQueryAppend = "results=100"; // Needed for YWS // Instantiate AutoComplete this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS); // Stub for AutoComplete form validation this.validateForm = function() { // Validation code goes here return true; }; };

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### AutoComplete Control Examples:

- Query a JavaScript Array for In-memory Data
- Query a JavaScript Function for In-memory Data
- Use AutoComplete to access the Yahoo! Search JSON API
- Use AutoComplete to access the Yahoo! Search XML API
- Use AutoComplete to access flat-file data from a web service
- Use AutoComplete with Flickr's XML Webservice
- Proxyless AutoComplete pointing to the Yahoo! Search API
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor (beta))
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control (beta))
- Complex Application (included with examples for Layout Manager (beta))

### More AutoComplete Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings