Yahoo! Developer Network Home - Help

YDN Site Search

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

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

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 return data 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, custom CSS rules have been applied, and the method `doBeforeExpandContainer` has been customized to position the container directly below the input field.

View example in new window.

Yahoo! Search:

## Sample Code

CSS:

/* custom styles for centered example */ body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in safari for absolute elements in positioned containers */ #ysearch { text-align:center; } #ysearchinput { position:static;width:20em; } /* to center, set static and explicit width: */ #ysearchcontainer { text-align:left;width:20em; } /* to center, set left-align and explicit width: */

Markup:

<form action="http://search.yahoo.com/search" onsubmit="return YAHOO.example.ACJson.validateForm();"> <div id="ysearch"> <label>Yahoo! Search: </label> <input id="ysearchinput" type="text" name="p"> <input id="ysearchsubmit" type="submit" value="Submit Query"> <div id="ysearchcontainer"></div> </div> </form>

JavaScript:

YAHOO.example.ACJson = 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", ["ResultSet.Result","Title"]); this.oACDS.queryMatchContains = true; this.oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS // Instantiate AutoComplete this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS); this.oAutoComp.useShadow = true; this.oAutoComp.formatResult = function(oResultItem, sQuery) { return oResultItem[1].Title + " (" + oResultItem[1].Url + ")"; }; this.oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) { var pos = YAHOO.util.Dom.getXY(oTextbox); pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2; YAHOO.util.Dom.setXY(oContainer,pos); return true; }; // Stub for form validation this.validateForm = function() { // Validation code goes here return true; }; };

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### 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