Custom Search Elements V2の実例

Custom Search Elementsとは、公開している特定の（自分の）Ｗｅｂサイトに限定したローカル検索エンジンです。

これをＷｅｂページに組み込むには、事前に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 Elements V2のＷｅｂページ取込

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

次の設定により、<gcse:search>の個所に検索窓ができ、その直下に検索結果が表示されます。

スクリプト
<script type="text/javascript">
    var cx = '1234567890:abcdefg'; // カスタム検索エンジンID
    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>

ＨＴＭＬ
<gcse:search
    queryParameterName="query"
    enableHistory="true"
    enableAutoComplete="true">
</gcse:search>

スクリプト部分は、このとおり記述する必要があります。
それに対して、ＨＴＭＬ部の<gcse:search> ～ </gcse:search> （Google での独自タグ）は多様な書き方ができます。
上記のgcse:searchでは、検索窓と検索結果が同じタグ内に入っていましたが、それを切り離したり、２列表示にすることができます。

<gcse:search> 標準

<gcse:search
    queryParameterName="query"
    enableHistory="true"
    enableAutoComplete="true">
</gcse:search>

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