YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: AutoComplete Control: Custom Formatting, with a Proxyless Remote DataSource

# AutoComplete Control: Custom Formatting, with a Proxyless Remote DataSource

This AutoComplete instance uses a ScriptNodeDataSource to point to the Yahoo! Audio Search webservice without a proxy. The generateRequest() method must be customized to comply with the third-party API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.

View example in new window.

### Yahoo! Audio Search:

## Sample Code

Data:

{"ResultSet": {"totalResultsAvailable":"48", "totalResultsReturned":10, "firstResultPosition":1, "Result": [ {"Name":"Foo Fighters", "Thumbnail":{ "Url":"http:\/\/thm-audio.image.search.vip.re3.yahoo.com\/image\/1899911147", "Height":40, "Width":60}, "RelatedArtists":[ {"id":"GB307626e70fbbed31b96072543be71667","content":"Alice In Chains"}, {"id":"GB95d7f729355f5ae35931a3db866d8f6e","content":"Babes In Toyland"}] } ... ]} }

CSS:

#myAutoComplete { width:30em; /* set width here or else widget will expand to fit its container */ padding-bottom:2em; } /* styles for custom formatting */ .yui-ac .result {position:relative;height:62px;} .yui-ac .name {position:absolute;bottom:0;left:64px;} .yui-ac .img {position:absolute;top:0;left:0;width:58px;height:58px;border:1px solid black;background-color:black;color:white;} .yui-ac .imgtext {position:absolute;width:58px;top:50%;text-align:center;} .yui-ac img {width:60px;height:60px;margin-right:4px;}

Markup:

<form action="http://audio.search.yahoo.com/search/audio" onsubmit="return YAHOO.example.CustomFormatting.validateForm();"> <h3>Yahoo! Audio Search:</h3> <div id="myAutoComplete"> <input id="myInput" type="text" name="p"> <div id="myContainer"></div> </div> </form>

JavaScript:

YAHOO.example.CustomFormatting = (function(){ // Instantiate DataSource var oDS = new YAHOO.util.ScriptNodeDataSource("http://search.yahooapis.com/AudioSearchService/V1/artistSearch"); oDS.responseSchema = { resultsList: "ResultSet.Result", fields: ["Name","Thumbnail"] }; // Setting to default value for demonstration purposes. // The webservice needs to support execution of a callback function. oDS.scriptCallbackParam = "callback"; // Instantiate AutoComplete var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS); // The webservice needs custom parameters oAC.generateRequest = function(sQuery) { return "?appid=YahooDemo&output=json&artist=" + sQuery ; }; // Stub for form validation var validateForm = function() { // Validation code goes here return true; }; return { oDS: oDS, oAC: oAC, validateForm: validateForm } })();

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