This AutoComplete instance uses a ScriptNodeDataSource to to find images from the YQL webservice without a proxy. The generateRequest() method must be customized to comply with the open API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.
A custom formatter function is defined in order to show thumbnail images in the results container.
Data:
1 | { |
2 | "query": { |
3 | "count": "10", |
4 | "created": "2009-04-03T09:49:28Z", |
5 | "lang": "en-US", |
6 | "updated": "2009-04-03T09:49:28Z", |
7 | "uri": "http://query.yahooapis.com/v1/yql?q=select+*+from+search.images+where+query%3D%22puppy%22+and+mimetype+like+%22%25jpeg%25%22", |
8 | "diagnostics": { |
9 | "publiclyCallable": "true", |
10 | "url": { |
11 | "execution-time": "47", |
12 | "content": "http://boss.yahooapis.com/ysearch/images/v1/puppy?format=xml&start=0&count=10" |
13 | }, |
14 | "user-time": "50", |
15 | "service-time": "47", |
16 | "build-version": "911" |
17 | }, |
18 | "results": { |
19 | "result": [ |
20 | { |
21 | "abstract": null, |
22 | "clickurl": "http://lrd.yahooapis.com/_ylc=X3oDMTQ4djBydWlmBF9TAzIwMjMxNTI3MDIEYXBwaWQDb0pfTWdwbklrWW5CMWhTZnFUZEd5TkouTXNxZlNMQmkEY2xpZW50A2Jvc3MEc2VydmljZQNCT1NTBHNsawN0aXRsZQRzcmNwdmlkA0tPWDFWa2dlQXUxQ3I1Lm9zeG1zeWdUMDJKRTJEMG5XaEdnQUNGQUo-/SIG=12he0tu52/**http%3A//www.pc-wallpapers.co.uk/wallpapers/Animals/dogs/lonely_puppy_1024.jpg", |
23 | "date": "2005/04/18", |
24 | "filename": "lonely_puppy_1024.jpg", |
25 | "format": "jpeg", |
26 | "height": "768", |
27 | "mimetype": "image/jpeg", |
28 | "refererclickurl": "http://lrd.yahooapis.com/_ylc=X3oDMTQ4djBydWlmBF9TAzIwMjMxNTI3MDIEYXBwaWQDb0pfTWdwbklrWW5CMWhTZnFUZEd5TkouTXNxZlNMQmkEY2xpZW50A2Jvc3MEc2VydmljZQNCT1NTBHNsawN0aXRsZQRzcmNwdmlkA0tPWDFWa2dlQXUxQ3I1Lm9zeG1zeWdUMDJKRTJEMG5XaEdnQUNGQUo-/SIG=12c8c25vo/**http%3A//www.pc-wallpapers.co.uk/viewer.php%3Fcmax=4%26cat=DO%26id=000001", |
29 | "refererurl": "http://www.pc-wallpapers.co.uk/viewer.php?cmax=4&cat=DO&id=000001", |
30 | "size": "85300", |
31 | "thumbnail_height": "120", |
32 | "thumbnail_url": "http://thm-a01.yimg.com/image/21a5b2d2b9d3aa14", |
33 | "thumbnail_width": "160", |
34 | "title": "lonely_puppy_1024.jpg", |
35 | "url": "http://www.pc-wallpapers.co.uk/wallpapers/Animals/dogs/lonely_puppy_1024.jpg", |
36 | "width": "1024" |
37 | } |
38 | ... |
39 | ] |
40 | } |
41 | } |
42 | } |
view plain | print | ? |
CSS:
1 | label { |
2 | color:#E76300; |
3 | font-weight:bold; |
4 | } |
5 | #myAutoComplete { |
6 | width:30em; /* set width here or else widget will expand to fit its container */ |
7 | padding-bottom:2em; |
8 | } |
9 | /* styles for custom formatting */ |
10 | .yui-ac .result {position:relative;height:62px;} |
11 | .yui-ac .name {position:absolute;bottom:0;left:64px;} |
12 | .yui-ac .img {position:absolute;top:0;left:0;width:58px;height:58px;border:1px solid black;background-color:black;color:white;} |
13 | .yui-ac .imgtext {position:absolute;width:58px;top:50%;text-align:center;} |
14 | .yui-ac img {width:60px;height:60px;margin-right:4px;} |
view plain | print | ? |
Markup:
1 | <label for="myInput">Yahoo! Image Search:</label> |
2 | <div id="myAutoComplete"> |
3 | <input id="myInput" type="text" name="p"> |
4 | <div id="myContainer"></div> |
5 | </div> |
view plain | print | ? |
JavaScript:
1 | YAHOO.example.CustomFormatting = (function(){ |
2 | // Instantiate DataSource |
3 | var oDS = new YAHOO.util.ScriptNodeDataSource("http://query.yahooapis.com/v1/public/yql?"); |
4 | oDS.responseSchema = { |
5 | resultsList: "query.results.result", |
6 | fields: ["url", "thumbnail_url", "clickurl"] |
7 | }; |
8 | |
9 | // Setting to default value for demonstration purposes. |
10 | // The webservice needs to support execution of a callback function. |
11 | oDS.scriptCallbackParam = "callback"; |
12 | |
13 | // Instantiate AutoComplete |
14 | var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS); |
15 | |
16 | // Bump up the query delay to reduce server load |
17 | oAC.queryDelay = 1; |
18 | |
19 | // The webservice needs custom parameters |
20 | oAC.generateRequest = function(sQuery) { |
21 | return "q=select%20*%20from%20search.images%20where%20query%3D%22" + |
22 | sQuery + |
23 | "%22%20and%20mimetype%20like%20%22%25jpeg%25%22&format=json"; |
24 | }; |
25 | |
26 | // Result data passed as object for easy access from custom formatter. |
27 | oAC.resultTypeList = false; |
28 | // Customize formatter to show thumbnail images |
29 | oAC.formatResult = function(oResultData, sQuery, sResultMatch) { |
30 | if(oResultData.thumbnail_url) { |
31 | img = "<img src=\""+ oResultData.thumbnail_url + "\">"; |
32 | } |
33 | else { |
34 | img = "<span class=\"img\"><span class=\"imgtext\">N/A</span></span>"; |
35 | } |
36 | return "<div class=\"result\">" + img + " <span class=\"name\">" + sResultMatch + "</span></div>"; |
37 | }; |
38 | oAC.itemSelectEvent.subscribe(function(sType, aArgs) { |
39 | var oData = aArgs[2]; // object literal of selected item's result data |
40 | |
41 | // Redirect to the img |
42 | window.location.href = oData.clickurl; |
43 | }); |
44 | |
45 | // Stub for form validation |
46 | var validateForm = function() { |
47 | // Validation code goes here |
48 | return true; |
49 | }; |
50 | |
51 | return { |
52 | oDS: oDS, |
53 | oAC: oAC, |
54 | validateForm: validateForm |
55 | } |
56 | })(); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings