7

基本的に、ページに検索結果が表示された後、いくつかの jQuery コードを実行する必要があります。v1 コードのいずれかを使用できます。

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
 google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
 google.setOnLoadCallback(function() {
var customSearchOptions = {};
var orderByOptions = {};
orderByOptions['keys'] = [{label: 'Relevance', key: ''},{label: 'Date', key: 'date'}];
customSearchOptions['enableOrderBy'] = true;
customSearchOptions['orderByOptions'] = orderByOptions;  var customSearchControl = new google.search.CustomSearchControl(
  'zzzzzzzzzzzz', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.setAutoCompletionId('zzzzzz:zzzzzzz+qptype:3');
options.enableSearchResultsOnly(); 
customSearchControl.draw('cse', options);
function parseParamsFromUrl() {
  var params = {};
  var parts = window.location.search.substr(1).split('\x26');
  for (var i = 0; i < parts.length; i++) {
    var keyValuePair = parts[i].split('=');
    var key = decodeURIComponent(keyValuePair[0]);
    params[key] = keyValuePair[1] ?
        decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
        keyValuePair[1];
  }
  return params;
}

var urlParams = parseParamsFromUrl();
var queryParamName = "q";
if (urlParams[queryParamName]) {
  customSearchControl.execute(urlParams[queryParamName]);
}
  }, true);
</script>

または v2 コード:

<!-- Put the following javascript before the closing </head> tag. -->

<script>
    (function() {
var cx = 'xxxxxxxxx';
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>

関数呼び出しをコードのさまざまな場所に配置しようとしましたが、役に立ちませんでした。

検索結果が表示されるコンテナーの高さを動的に設定する必要がある関数があるため、結果が読み込まれたらそれを呼び出す必要があります。そうしないと、ページが正しく表示されません。

v2 API ドキュメントへのリンクは次のとおりです: https://developers.google.com/custom-search/docs/element#cse-elementおよび v1: https://developers.google.com/custom-search/docs/ js/cselement-reference . 検索結果のレンダリング時にコールバックがある場所は何も表示されず、初期化時にのみ表示されます。このようなものはサポートされていませんが、クレイジーに思えます。

これが私がv2で試したことです：

(function () {
        var cx = 'xxxxxxxxx';
        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;
        gcse.onreadystatechange = gcse.onload = function () {
            console.log("executed");
            SetMainHeight(20);
        };
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);

    })();

コンソールは「実行済み」を出力しません。また、コンソールに次のエラーがあることに気付きました。

安全でない JavaScript が URL のフレームにアクセスしようとしています about:blank from frame with URL http://www.google.com/cse?q=test&client=google-coop&hl=en&r=s&cx=xxxxx …s1%2Csr1&rurl=http%3A%2F %2Flocalhost%3A58257%2FSearch%3Fq%3Dtest#slave-1-1. ドメイン、プロトコル、およびポートが一致する必要があります。

検索機能がまだ正常に機能するため、それが問題になるかどうかはわかりません。これを http 経由の localhost でテストしています。

4

3 に答える 3

13

以前の解決策はうまくいきませんでしたが、私にとってうまくいったのは次のとおりです。

<script>
  (function() {

    window.__gcse = {
      callback: myCallback
    };

    function myCallback() {
       $('input.gsc-input').keyup(function(e) { if(e.keyCode == 13 || e.which == 13) {  console.log('enter pressed'); }});
      $('input.gsc-search-button').on('click', function(e) { console.log('clicked');});
    }
    var cx = '002806224466286757728:XXXXXXX';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = false;
    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></gcse:search>

お役に立てれば

于 2014-05-12T23:37:13.013 に答える
5

残念ながら、v2にはこの機能がありませんが、v1では次のものを使用できます。

.setSearchCompleteCallback(object, method)

このページで検索できます。

于 2013-02-21T18:02:28.467 に答える
0

たとえば、v2 の場合、DOM に挿入する前に、onload ハンドラを gcse オブジェクト (スクリプト) に設定してみてください。

gcse.onreadystatechange = gcse.onload = function() {
  //execute my code
};

基本的にあなたは次のようになります：

<!-- Put the following javascript before the closing </head> tag. -->

<script>
    (function() {
var cx = 'xxxxxxxxx';
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;
gcse.onreadystatechange = gcse.onload = function() {
  //execute your code here
};
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>
于 2013-02-21T16:53:40.310 に答える