このサンプルは、Yahoo! Query Languageを利用してYahoo! Imagesを検索して表示します。検索窓に検索キーを入力したら[Search...!]ボタンをクリックします。結果がサムネイルで表示されます。サムネイルをクリックすると新規ウィンドウに拡大表示します。
var keyword = $('#txtKeyword').val();
var url = 'http://query.yahooapis.com/v1/public/yql?callback=?'
var sql = 'select * from search.images where query="{keyword}" and mimetype like "%jpeg%"';
var query = sql.replace('{keyword}', keyword);
var params = {
q: query,
format: 'json'
}
$.getJSON(url, params, function(data) {
if (data.query.count == 0) return;
var html = '';
$.each(data.query.results.result, function(i, item) {
var title = item.title;
var thumb = item.thumbnail_url;
var href = item.url;
html += template.replace('?', href).replace('?', title).replace('?', thumb);
});
$('#placeholder').html(html);
}); // end of getJSON