検索要素コールバックのその他の例

このページでは、検索要素のコールバックの使用例を紹介します。これらは カスタムコードの Callbacks セクションに記載されている例 Search Element API ドキュメントをご覧ください。

検索開始コールバックの例

検索開始コールバックは、検索に使用される前にクエリを変更できます。 プログラム可能検索エンジンは、クエリに事前定義された用語を含めるように構成できますが、 このコールバックは、コールバックが受け取った情報に基づいてクエリを変更できます。 使用します。

次の検索開始コールバックは、各クエリを現在の日付で装飾します。 できます。

<ph type="x-smartling-placeholder">
</ph> 検索開始のコールバックの例 
<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const mySearchStartingCallback = (gname, query) => {
  const dayOfWeek = new Date().getDay();
  console.log(dayOfWeek);
  var days = {
        "0": "Sunday",
        "1": "Monday",
        "2": "Tuesday",
        "3": "Wednesday",
        "4": "Thursday",
        "5": "Friday",
        "6": "Saturday"
    };

    return query + ' ' + days[dayOfWeek];
};
// Install the callback.
window.__gcse || (window.__gcse = {});
  window.__gcse.searchCallbacks = {
    image: {
      starting: mySearchStartingCallback,
    },
    web: {
      starting: mySearchStartingCallback,
    },
};

次の要素を HTML に含めます。

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

結果表示のコールバックの例

結果表示のコールバックは、結果が入力された後にページを変更する場合に適しています。 コールバックを必要とせずに、結果の表示を簡単に変更できるように設計されています。 結果をレンダリングする全責任を負います

次の例は、結果レンダリング コールバックの 2 つの用途を示しています。 結果を操作するわけではありません

<ph type="x-smartling-placeholder">
</ph> 最後の結果ページを特定

この results レンダリング コールバックにより、最後のページが表示されていることが通知されます。 終わりに到達したことをユーザーに知らせるアラートをポップアップ表示します。 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
    var searchresults= document.getElementsByClassName("gsc-cursor-page");
    var index= document.getElementsByClassName("gsc-cursor-current-page");
    if(index.item(0).innerHTML == searchresults.length){
       alert("This is the last results page");
    }
};

コールバックをインストールする 

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

次の要素を HTML に含めます。

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<ph type="x-smartling-placeholder">
</ph> 「カーソル」のフォントサイズを大きくするリンク

この結果レンダリングのコールバック デモでは、 "カーソル"結果のページを選択する数値です。

デフォルトのフォントサイズは 12 ピクセルです。ここでは、20 ピクセルに増やします。 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
   document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};

コールバックをインストールする 

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

次の要素を HTML に含めます。

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<ph type="x-smartling-placeholder">
</ph> 「Cursor」には文字を使用するラベル

この結果のレンダリング コールバックは、「カーソル」内のページリンクを変更します。 数字から文字に変換できます。 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
    var arr = document.getElementsByClassName('gsc-cursor-page');
    var alp = ['A','B','C','D','E','F','G','H','I','J','K','L',
      'M','N','O','p','Q','R','S','T','U','V','W','X','Y','Z'];
    for (var i = 0; i < arr.length; i++) {
        arr[i].innerHTML = alp[i];
    }
};

コールバックをインストールする 

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

次の要素を HTML に含めます。

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

Results Ready Callback の例

<ph type="x-smartling-placeholder">
</ph> 交互の背景色で結果を表示する

このコールバックは、明るい背景と暗い背景が交互に表示されるように結果をフォーマットします。 

<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

注: このコードは JavaScript/ES6 で記述されています。ほとんどのブラウザで動作するが、 JavaScript/ES5（Internet Explorer およびその他数個古いもの）に変換 できます。 

barredResultsRenderedCallback = function(gname, query, promoElts, resultElts){
  const colors = ['Gainsboro', 'FloralWhite'];
  let colorSelector = 0;
  for (const result of resultElts) {
    result.style.backgroundColor = colors[colorSelector];
    colorSelector = (colorSelector + 1) % colors.length;
  }
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: barredResultsRenderedCallback,
  },
};

次の要素を HTML に含めます。

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

ワードクラウド

results ready コールバックの用途として一般的なのは、検索結果を レンダリングされた結果のコールバックでは、レンダリングが困難な場合に HTML結果準備完了 コールバックは空の div で始まります。 Search Element API のドキュメントの例 は、コールバックを使用して非常にシンプルな結果をレンダリングする方法を示しました。 別の例 results ready コールバックからの結果データを保持して results render コールバックで標準の結果をデコレートします。 表示されます。

次の results ready コールバックは、エージェントが検索結果をレンダリングしなくても、 結果のリストです。検索結果の通常の表示を置き換える 検索結果で見つかった単語のワードクラウドが表示されます。作成します。リストには、 結果はユーザーの中間ステップにすぎないため、このようなコールバックはそのステージをバイパスできます。 結果を使用して、ユーザーが求めるレポートを提示します。

<ph type="x-smartling-placeholder">
</ph> 検索結果のコンテンツからワードクラウドを作成する 
<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<style>
  #container {
    width: 100%;
    height: 4.5in;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>

注: このコードは JavaScript/ES6 で記述されています。ほとんどのブラウザで動作するが、 JavaScript/ES5 に変換（Internet Explorer など） 古いブラウザです。 

const resultsReadyWordCloudCallback = function(
        name, q, promos, results, resultsDiv) {
    const stopWords = new Set()
      .add('a')
      .add('A')
      .add('an')
      .add('An')
      .add('and')
      .add('And')
      .add('the')
      .add('The');

    const words = {};
    const splitter = /["“”,\?\s\.\[\]\{\};:\-\(\)\/!@#\$%\^&*=\+\*]+/;
    if (results) {
        for (const {contentNoFormatting, titleNoFormatting} of results) {
            const wordArray = (contentNoFormatting + ' ' + titleNoFormatting)
              .split(splitter)
              .map(w => w.toLowerCase());
            for (const w of wordArray) {
                if (w && !stopWords.has(w)) {
                    words[w] = (words[w] + 1) || 1;
                }
            }
        }
    }
    const dataForChart = [];
    for (const key in words) {
        const val = words[key];
        dataForChart.push({
            'x': key,
            'value': val,
        });
    }

    const container = document.createElement('div');
    resultsDiv.appendChild(container);
    container.id = 'container';
    // create a tag (word) cloud chart
    const chart = anychart.tagCloud(dataForChart);
    // set a chart title
    chart.title(`Words for query: "${q}"`)
    // set an array of angles at which the words will be laid out
    chart.angles([0, 45, 90, 135])
    // display the word cloud chart
    chart.container(container);
    chart.draw();
    return true; // Don't display normal search results.
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
    web: {
        ready: resultsReadyWordCloudCallback,
    },
};

次の要素を HTML に含めます。

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

2 要素構成のコールバックの例

results ready（結果の準備）コールバックと resultsrender（表示完了）のコールバックを組み合わせて使用すると、上記のコールバックに対して前後のコールバックに対して情報を渡すことができます。 たとえば、結果オブジェクトの配列内の情報は、results ready コールバックで使用できますが、results render コールバックは使用できません。 情報を results ready コールバックの一部として配列に保存することで、resultsrender コールバックがアクセスできるようにします。

たとえば、画像の検索結果がクリックされたときに表示されるプレビュー パネルをバイパスできます。 2 要素構成のコールバックを使用すると、画像の検索結果をクリックすると、対応するウェブサイトに直接リンクでき、クリックすると画像のプレビューが表示されることはありません。

<ph type="x-smartling-placeholder">
</ph> 画像プレビューをバイパスする 
<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const makeTwoPartCallback = () => {
  let urls;
  const readyCallback = (name, q, promos, results, resultsDiv) => {
    urls = [];
    for (const result of results) {
      urls.push(result['contextUrl']);
    }
  };
  const renderedCallback = (name, q, promos, results) => {
    const removeEventListeners = element => {
      const clone = element.cloneNode(true);
      element.parentNode.replaceChild(clone, element);
      return clone;
    };
    for (let i = 0; i < results.length; ++i) {
      const element = removeEventListeners(results[i]);
      element.addEventListener('click', () => window.location.href = urls[i]);
    }
  };
  return {readyCallback, renderedCallback};
};
const {
  readyCallback: imageResultsReadyCallback,
  renderedCallback: imageResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  image: {
    ready: imageResultsReadyCallback,
    rendered: imageResultsRenderedCallback,
  },
};

次の要素を HTML に含めます。

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