谷歌网站搜索catch搜索提交和触发功能

Question

我有一个由谷歌提供的只有一个搜索框的页面

    <gcse:search></gcse:search>

现在，当我在搜索框中输入内容并按 Enter 键时，我希望在返回搜索结果时触发我的脚本运行。

到目前为止我尝试过的事情

这里我尝试使用提交事件来触发我的脚本

    $(document).on('submit', 'input', function(e) {
        alert('trig');
    }

这里我试图抓住回车键，因为我删除了搜索按钮

    $(document).keypress(function(e) {
        alert('triggered');
    });

这里我试图将焦点放在表单 id 上

    $('#gsc-i-id1').focus().trigger(function(e) {
        alert('triggered');
    });

全部失败

这是 gcse 标签创建的 id 和类的列表

    #___gcse_0
    .gsc-control-cse .gsc-control-cse-en
    .gsc-control-wrapper-cse
    .gsc-search-box .gsc-search-box-tools
    .gsc-search-box
    .gsc-input
    #gsc-iw-id1
    #gs_id50
    #gs_tti50
    #gsc-i-id1

Answer 1

使用以下 CODE sn-p，您将能够在搜索 input 字段中捕获键盘事件 enter，在搜索 button 中捕获鼠标 click 事件。

注意：此答案仅捕获键盘输入和搜索按钮单击事件（如原始问题中所述）。我添加了类似的another answer，但也会在每次有效击键时自动重新填充搜索结果。

(function($, window) {
  var elementName = '';
  var initGCSEInputField = function() {
    $( '.gcse-container form.gsc-search-box input.gsc-input' )
      .on( "keyup", function( e ) {
      if( e.which == 13 ) { // 13 = enter
        var searchTerm = $.trim( this.value );
        if( searchTerm != '' ) {
          console.log( "Enter detected for search term: " + searchTerm );
          // execute your custom CODE for Keyboard Enter HERE
        }
      }
    });
    $( '.gcse-container form.gsc-search-box input.gsc-search-button' )
      .on( "click", function( e ) {
      var searchTerm = $.trim( $( '.gcse-container form.gsc-search-box input.gsc-input' ).val() );
      if( searchTerm != '' ) {
        console.log( "Search Button Click detected for search term: " + searchTerm );
        // execute your custom CODE for Search Button Click HERE
      }
    });
  };
  
  var GCSERender = function() {
  	google.search.cse.element.render({
        div: 'gcse_container',
        tag: 'search'
      });
      initGCSEInputField();
  };
  
  var GCSECallBack = function() {
    if (document.readyState == 'complete') {
      GCSERender();
    }
    else {
      google.setOnLoadCallback(function() {
        GCSERender();
      }, true );
    }
  };
  
  window.__gcse = {
  	parsetags: 'explicit',
    callback: GCSECallBack
  };
})(jQuery, window);

(function() {
  var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search engine ID here
  var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
  gcse.src = 'https://www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gcse-container" id="gcse_container">
  <gcse:search enableAutoComplete="true"></gcse:search>
</div>

上面的CODE sn-p使用Google Custom Search element control API.