Question

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

    <gcse:search></gcse:search>

现在，当我输入搜索框并点击回车时，我想触发我的脚本在搜索结果返回时运行。

我尝试过的事情

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

    $(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代码段，您可以在搜索enter上的搜索input字段和鼠标click事件中按button按键捕获键盘事件

注意：此答案仅捕获键盘输入＆amp;搜索按钮单击事件（如原始问题中所述）。我添加了类似的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代码段使用Google Custom Search element control API.

谷歌站点搜索捕获搜索提交和触发功能

1 个答案: