AutoComplete Widget :: Basic JSON Data

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 data found in the object literal 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, not only have custom CSS been applied, but the the doBeforeExpandContainer method has also been customized to position the container directly below the input field.

Sample Code

CSS:

Markup:

JavaScript: