jqueryで入力された文字列から自動で画像検索するコードを実装してみた

昨日は失敗談だけでしたが、
jqueryでgoogleの画像検索を行いサムネイルを表示させるということを実装することができました。

    $("#search").keyup(function() {  //フォームでキーが叩かれた時に実行
        var word = $(this).attr("value");　//叩かれた文字を取得
        if (word.length < 2) {　//もし2文字以上なければ検索しない
            return;
        }
        $.getJSON('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&rsz=large&lh=ja&q='+word+'&callback=?', function(imgs) {
            $("li.thumb").remove(); //前回表示させていた画像を削除
            $.each(imgs.responseData.results, function(i, value) {
                //var path = value.url;  //原寸画像がほしい場合
                var path = value.tbUrl;　//サムネイル画像がほしい場合
                $("ul.listThumbs").append('<li class="thumb"><img src="'+path+'" width=" 50" height="50" class="searchimg"/><br /><input type="radio" name="fileurl" value="'+path+'"/></li>');  //イメージサムネイルを挿入する
            });
        });
    });

難点は、このAPIでは最大8件しか画像を取得できないこと。

昨日のエントリのyahooAPIでは何件でも取得できていました。
http://d.hatena.ne.jp/Arko/20090421/1240322219

ただ、yahooAPIよりも精度がよく狙った画像がとれやすいのでこちらへ移行しております。
一長一短ですね！
ちなみに今回はPHP使わずにサーバーサイドだけで実装することに重点を置いてもいます。

参考：http://www.seo-lpo.net/archives/24601
　　　http://zapanet.info/blog/item/986