Programmable Search Engineで複数の入力欄を実装する方法

、GoogleのProgrammable Search Engine (PSE) を使って、複数の検索フォームから1つの検索結果を表示するよ。公式ドキュメントだけではわからない部分があったので、試行錯誤した結果をまとめてみました。

実装の背景

通常、PSEを使う場合は以下のようにHTMLタグを使うのが一般的です。

<div class="gcse-searchbox"></div>

しかし、これだと1ページに1つの検索フォームしか作れません。複数のフォームから検索したい場合は少し工夫が必要です。JavaScriptを使って自由度を上げる方法をご紹介します。

実装例

以下は、複数のフォームから検索を実行するためのコード例です。

searchForms.forEach((searchForm) => {
    searchForm.addEventListener('submit', (e) => handler(e));
});

function handler(e: Event) {
    e.preventDefault();

    const inputEle: HTMLInputElement = e.target.querySelector('#word');
    const query = inputEle.value;

    const cseElements = google.search.cse.element.getAllElements();
    const cseKeys = Object.keys(cseElements);
    const cseElement = cseElements[cseKeys[0]];

    cseElement.execute(query);
}

ポイント解説

1. フォームの監視
   まず、searchFormsにすべてのフォームを格納して、submitイベントを監視します。

2. 検索クエリの取得
   ユーザーが入力した検索ワードをinput要素から取得します。この例では、入力欄のIDを#wordとしています。

3. 検索の実行
   google.search.cse.element.getAllElements() で検索エンジンの要素を取得し、最初の要素を使ってexecute(query)を実行します。

補足情報と工夫

• google.search.cse.element.getElement()について
  似たようなメソッドとしてgetElement()もありますが、引数として渡す値が不明だったため、getAllElements()を使いました。その結果、キーの最初の要素を利用しています。

• DOM要素っぽいけど…
  google.search.cse.elementは名前の通りDOM要素っぽく見えますが、実際はただのJavaScriptオブジェクトです。このオブジェクトを通じて検索ロジックを操作します。

今後の課題

現在、google.search.cseの型定義（TypeScript用）が見つかっていません。型定義があればコードの安全性がさらに向上するため、公式ドキュメントやコミュニティで情報を探してみる価値がありそうです。