まず、ready() を作成し
検索ボタンがクリックされたら
テキストフィールをの値を引数にして検索を実行
クリアボタンがクリックされたら、div エレメントの内容をクリアするというもの
まず
ready() の中身から
ｓｅａｒｃｈ属性のボタンがクリックされたら
val（） でテキストフィールドの値を取り出して
それを引数にして searcyh() を呼び出し
ちなみに。ｓｅａｒｃｈ() は自作関数
続いて、クリアボタンがクリックされたら、
empty() を使って
display 属性のついている内容をクリア
さらに
title 属性のついているテキストもクリアする
コードにすると
$(funcrion(){
//検索を実行
$("#search").click(function(){
search($("keyword").val());
});
//検索結果をクリア
$("#clear").click(funcrion(){
$("#display").empty();
$("#title").text("");
});
});
となります
続いて
検索する search() という関数の自作
function search(keyword){
//ローディング中
$(“#title”).text(“Loading …..”);
$.ajax({
dataType:”jsonp”,
data:{
“term”:keyword,
“country”:”jp”,
“media”:”music”,
“entity”:”album”,
“limit”:”10″
},
url: “http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch”,
success: funcrion(data){
$(“#title”).text(“”);
$.each(data.results,function(i, item){
$(““)
.attr(“href”, item.collectionViewUrl)
.appnd(““)
.mouseover(function(){
$(“#title”).text(item.collectionName);
})
.appendTo(“#display”);
});
}
});
}
$(“#title”).text(“Loading …..”);
は読み込み中の時に表示する文字列です
ネット速度が早いとでないかも…
data:{
“term”:keyword,
“country”:”jp”,
“media”:”music”,
“entity”:”album”,
“limit”:”10″
},
は
ｉＴｕｎｅｓ Store Web API に送信するパラメータの指定です
ちなみに、
term はキーワードですが、これを
keyword という変数にしておくことで
検索キーワードで調べることが可能になっています
このkeyword は
<input type=”text” id=”keyword”>
で得たデータになっています
ちなみに、jsoncallback は指定していないけど
自動的に設定されるので問題無し
url: “http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch”,
は
Web API のURLとなります
最後の
success: funcrion(data){
$(“#title”).text(“”);
$.each(data.results,function(i, item){
$(““)
.attr(“href”, item.collectionViewUrl)
.appnd(““)
.mouseover(function(){
$(“#title”).text(item.collectionName);
})
.appendTo(“#display”);
});
はデータ取得成功のときの処理で
.attr(“href”, item.collectionViewUrl)
はhref 属性を web API へ
.mouseover(function(){
$(“#title”).text(item.collectionName);
はマウスを乗せたときの処理で
これにより 画像にマウスを乗せると
アルバム名が表示されます
ちなみに、iTunes の Web API を使っているため
アルバム画像をクリックすると
iTunes の画面に飛びます
これとアフィリエイトと組み合わせるといろいろとおもしろいことができそうです
iTunes Store Web Service Search API アフィリエイト
と検索すると、ヒントなどがでてきます
