読者です 読者をやめる 読者になる 読者になる

Google AJAX Search API ウェブ検索の表示部分をカスタマイズしてみる

Google AJAX Search APIのウェブ検索を使うと、Googleで検索した結果をすばやく表示することができます。
ただデフォルトだとGoogleの検索の表示イメージそのままなので、今回は検索ボックスなし、結果はタイトルのみ、ページングリンクはなしというをやってみた。

<script language="Javascript" type="text/javascript">
google.load("search", "1", {"language" : "jp"});

function OnLoad() {

    var searcher = new google.search.WebSearch();  //Web検索
    searcher.setSearchCompleteCallback(searcher, searchComplete, null);
    searcher.execute('iphone4');  //検索キーワード指定

    function searchComplete(){
        showSearchResults(this.results,document.getElementById('searchResults'));
    }

    // 検索結果を表示
    function showSearchResults(searchResults,domElement){
        if (searchResults && searchResults.length > 0) {
            domElement.innerHTML = '';
            for (var i = 0; i < searchResults.length; i++) {
                var result=searchResults[i];
                domElement.innerHTML += '<a href="'+ result.url  +'" target="_blank">'+ result.titleNoFormatting + '</a><BR>';
            }
        }
    }
}

google.setOnLoadCallback(OnLoad);
</script>

<body>
<div id="searchResults"></div>
</body>


キーワード「iphone4」の結果。タイトルのみ表示してリンクをはっています。