JavaScript + Ajax 実践サンプル集 - jQueryとGoogle Search APIを利用してサイト検索機能を実装する

jQueryとGoogle Search APIを利用してサイト検索機能を実装する

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのgetJSON()apiとGoogle Search APIを利用して自分のサイトを検索する機能を実装しています。サンプルが表示されたら検索窓にキーワードを入力して[SEARCH]ボタンをクリックします。検索結果が８件表示されます。デフォルトで当サイト(jsajax.com)を検索します。Webを検索するには、ラジオボタンから「Search The Web」を選択します。 Webの他にイメージ、ビデオなども検索できます。

このサンプルを編集して試してみる

このサンプルのソースコードは、ここからダウンロードできます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Google Powered Site Search</title>
  <link href="jQuery/googlePoweredSiteSearch/styles.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {

var config = {
        siteURL: 'jsajax.com', 
        searchSite: true,
        type: 'web',
        append: false,
        perPage: 8, 
        page: 0
      }

var arrow = $('<span>', { className: 'arrow' }).appendTo('ul.icons');

$('ul.icons li').click(function () {
        var el = $(this);

if (el.hasClass('active')) {
          return false;
        }

el.siblings().removeClass('active');
        el.addClass('active');

arrow.stop().animate({
          left: el.position().left,
          marginLeft: (el.width() / 2) - 4
        });

config.type = el.attr('data-searchType');
        $('#more').fadeOut();
      });

$('#siteNameLabel').append(' ' + config.siteURL);

$('#searchSite').click();

$('li.web').click();

$('#s').focus();

$('#searchForm').submit(function () {
        googleSearch();
        return false;
      });

$('#searchSite,#searchWeb').change(function () {
        config.searchSite = this.id == 'searchSite';
      });

function googleSearch(settings) {
        settings = $.extend({}, config, settings);
        settings.term = settings.term || $('#s').val();

if (settings.searchSite) {
          settings.term = 'site:' + settings.siteURL + ' ' + settings.term;
        }

var apiURL = 'http://ajax.googleapis.com/ajax/services/search/' + settings.type + '?v=1.0&callback=?';
        var resultsDiv = $('#resultsDiv');

$.getJSON(apiURL, { q: settings.term, rsz: settings.perPage, start: settings.page * settings.perPage }, function (r) {

var results = r.responseData.results;
          $('#more').remove();

if (results.length) {
            var pageContainer = $('<div>', { className: 'pageContainer' });

for (var i = 0; i < results.length; i++) {
              pageContainer.append(new result(results[i]) + '');
            }

if (!settings.append) {
              resultsDiv.empty();
            }

pageContainer.append('<div class="clear"></div>')
							 .hide().appendTo(resultsDiv)
							 .fadeIn('slow');

function result(r) {

var arr = [];
        switch (r.GsearchResultClass) {

case 'GwebSearch':
            arr = [
					'<div class="webResult">',
					'<h2><a href="', r.unescapedUrl, '" target="_blank">', r.title, '</a></h2>',
					'<p>', r.content, '</p>',
					'<a href="', r.unescapedUrl, '" target="_blank">', r.visibleUrl, '</a>',
					'</div>'
				];
            break;
          case 'GimageSearch':
            arr = [
					'<div class="imageResult">',
					'<a target="_blank" href="', r.unescapedUrl, '" title="', r.titleNoFormatting, '" class="pic" style="width:', r.tbWidth, 'px;height:', r.tbHeight, 'px;">',
					'<img src="', r.tbUrl, '" width="', r.tbWidth, '" height="', r.tbHeight, '" /></a>',
					'<div class="clear"></div>', '<a href="', r.originalContextUrl, '" target="_blank">', r.visibleUrl, '</a>',
					'</div>'
				];
            break;
          case 'GvideoSearch':
            arr = [
					'<div class="imageResult">',
					'<a target="_blank" href="', r.url, '" title="', r.titleNoFormatting, '" class="pic" style="width:150px;height:auto;">',
					'<img src="', r.tbUrl, '" width="100%" /></a>',
					'<div class="clear"></div>', '<a href="', r.originalContextUrl, '" target="_blank">', r.publisher, '</a>',
					'</div>'
				];
            break;
          case 'GnewsSearch':
            arr = [
					'<div class="webResult">',
					'<h2><a href="', r.unescapedUrl, '" target="_blank">', r.title, '</a></h2>',
					'<p>', r.content, '</p>',
					'<a href="', r.unescapedUrl, '" target="_blank">', r.publisher, '</a>',
					'</div>'
				];
            break;
        }
        this.toString = function () {
          return arr.join('');
        }
      }

});

</script>
</head>
<body>
  <div id="page">
    <form id="searchForm" method="post">
    <fieldset>
      <input id="s" type="text" value="jQuery 1.4.2" />
      <input type="submit" value="Submit" id="submitButton" />
      <div id="searchInContainer">
        <input type="radio" name="check" value="site" id="searchSite" checked />
        <label for="searchSite" id="siteNameLabel">
          Search</label>
        <input type="radio" name="check" value="web" id="searchWeb" />
        <label for="searchWeb">
          Search The Web</label>
      </div>
      <ul class="icons">
        <li class="web" title="Web Search" data-searchtype="web">Web</li>
        <li class="images" title="Image Search" data-searchtype="images">Images</li>
        <li class="news" title="News Search" data-searchtype="news">News</li>
        <li class="videos" title="Video Search" data-searchtype="video">Videos</li>
      </ul>
    </fieldset>
    </form>
    <div id="resultsDiv">
    </div>
  </div>
  <p class="credit">
    <a href="http://tutorialzine.com/2010/09/google-powered-site-search-ajax-jquery/">
      Powered by Tzine & Google</a></p>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryとGoogle Search APIを利用してサイト検索機能を実装する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryとGoogle Search APIを利用してサイト検索機能を実装する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!