YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: AutoComplete Control: Customizing Remote Requests

# AutoComplete Control: Customizing Remote Requests

This AutoComplete implementation points to the Yahoo! Search webservice using an XHRDataSource. Since the third-party API requires certain application-specific paramaters to be passed in, the generateRequest() method has been redefined to append these special values. The `queryDelay` paramater has been increased to account for the large data payload returned by the Yahoo! Search webservice, so as to reduce throttle client-side processing.

View example in new window.

### Yahoo! Search:

## Sample Code

Data:

{"ResultSet": {"totalResultsAvailable":"22000000", "totalResultsReturned":5, "firstResultPosition":1, "Result": [ {"Title":"foo", "Summary":"... When foo' is used in connection with bar' it has generally traced...", "Url":"http:\/\/www.catb.org\/~esr\/jargon\/html\/F\/foo.html", "ModificationDate":1072684800, "MimeType":"text\/html" }, {"Title":"Foo Fighters", "Summary":"Official site with news, tour dates, discography, store, community, and more.", "Url":"http:\/\/www.foofighters.com\/", "ModificationDate":1138521600, "MimeType":"text\/html" } ... ]} }

CSS:

#myAutoComplete { width:40em; /* set width here or else widget will expand to fit its container */ padding-bottom:2em; }

Markup:

<div id="myAutoComplete"> <input id="myInput" type="text"> <div id="myContainer"></div> </div>

JavaScript:

YAHOO.example.RemoteCustomRequest = function() { // Use an XHRDataSource var oDS = new YAHOO.util.XHRDataSource("assets/php/ysearch_proxy.php"); // Set the responseType oDS.responseType = YAHOO.util.XHRDataSource.TYPE_JSON; // Define the schema of the JSON results oDS.responseSchema = { resultsList : "ResultSet.Result", fields : ["Title"] }; // Instantiate the AutoComplete var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS); // Throttle requests sent oAC.queryDelay = .5; // The webservice needs additional parameters oAC.generateRequest = function(sQuery) { return "?output=json&results=100&query=" + sQuery ; }; return { oDS: oDS, oAC: oAC }; }();

### YUI Logger Output:

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

Reload with logging
and debugging enabled.

### AutoComplete Control Examples:

- Basic Local Data
- Basic Remote Data
- Customizing Remote Requests
- Custom Formatting, with a Proxyless Remote DataSource
- Searching Field A, Submitting Field B with itemSelectEvent
- Combo Box
- Tagging Example with alwaysShowContainer
- Custom Function to Search Different Fields at Runtime
- Centering AutoComplete On a Page
- Subset Matching
- Find Photos on Flickr
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor)
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control)
- Complex Application (included with examples for Layout Manager)

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