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.

Sample Code

CSS:

Markup:

JavaScript:

Copyright © 2007 Yahoo! Inc. All rights reserved.

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