javascript - Google site search catch 搜索提交和触发功能

Question

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

    <gcse:search></gcse:search>

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

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

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

    $(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

使用以下代码片段，您将能够在搜索 input 字段中按下 enter 键并鼠标 click 时捕获键盘事件搜索按钮上的事件。

Note: This answer only captures keyboard enter & search button click events (as asked in the original question). I've added another answer that is similar, but also auto re-populates search result on every valid keystroke.

(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>

上面的代码片段使用了Google Custom Search element control API.