Custom Search Element Control API (V2)の実例

Custom Search Element Control API は、Custom Search Elementsの各種パラメタをJavascriptで指定するためのＡＰＩです。

これをＷｅｂページに組み込むには、事前にGoogleサイトで「カスタム検索エンジンID」を取得し、対象とするＷｅｂサイトを設定しておく必要があります。

参照：Google「Custom Search Element V2」
　　 http://www.crystal-creation.com/web-appli/technical-information/web-api/google/search/web/custom-search/v2.htm

Custom Search Element ControlのＷｅｂページ取込

既に、カスタム検索エンジンID「1234567890:abcdefg」（仮）を取得し、Ｗｅｂサイト「www.kogures.com」を検索対象に登録しています。

次の設定により、<div id="検索ボックス"></div>の個所に検索窓ができ、その直下に検索結果が表示されます。

スクリプト
<script type="text/javascript">                          // Ａ
    var cx = "1234567890:abdefghij";
    var gcse = document.createElement( "script" );
    gcse.type = "text/javascript";
    gcse.async = true;
    gcse.src = ( document.location.protocol == "https" ? "https:" : "http:" )
             + "//www.google.com/cse/cse.js?cx=" + cx;
    var s = document.getElementsByTagName( "script" )[ 0 ];
    s.parentNode.insertBefore( gcse, s );
</script>

<script type="text/javascript">                          // Ｂ
    var InitCSE = function() {       // Ｅ
        var componentConfig = {
            div: "検索ボックス",                        // Ｇ
            tag: "search",
            attributes: {                                       // Ｉ
                queryParameterName: "query",
                enableHistory: true,
                enableAutoComplete: true
            }
        };
        google.search.cse.element.render( componentConfig );            // Ｆ
    }

    window.__gcse = {                               // Ｃ
        parsetags: "explicit",
        callback: function() {
            if( document.readyState == "complete" )  InitCSE();       // Ｄ
            else google.setOnLoadCallback( function () { InitCSE(); }, true );
        }
    };
</script>

ＨＴＭＬ
<div id="検索ボックス"></div>                       <!-- Ｈ -->

Ａ：このスクリプトは、 Custom Search Elementsのものと全く同じです。すなわち、Custom Search Element Controlは、Custom Search Elementsと同じ環境で、Ｂのスクリプトにより、多様なオプション機能をもたせているのです。
Ｂ：ここでは、InitCSE、componentConfig、検索ボックスの３つが自由な名称がつけられますが、InitCSEとcomponentConfigは解説書でこの名称を使うことが多いので、このままにしておくほうが無難です。
Ｃのwindow.__gcseでは、スクリプト読み込み後に実行する初期化関数の定義です。そして、準備が整ったら、ＤでＥのInitCSEを呼出し、ＦでCustom Search elementsに渡すパラメータを設定します。その検索結果は、ＧによりＨに表示されます。
Ｉで、検索のオプションを与えています。　　　

enableAutoComplete

trueにするとキーワード入力途中でプルダウンメニューに候補が表示されます。falseはそれを抑制します。デフォルトはtrueです。

enableHistory

Ｗｅｂページがブラウザの履歴を管理している場合は true。それ以外の場合は false。

標準のままだと１行全体が検索窓になるので、「.gsc-search-box {width:60% !important}」のスタイル指定をしています。