谷歌站点搜索捕获搜索提交和触发功能 [英] Google site search catch search submit and trigger function

问题描述

我的网页上只有google提供的搜索框

I have a page with just a searchbox on provided by google

    <gcse:search></gcse:search>

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

Now when I type in the search box and hit enter I would like to trigger my script to run as the search results gets returned.

我尝试过的东西

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

Here I tried to use the submit event to trigger my script

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

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

Here I tried to catch the enter key as I have removed the search button

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

这里我试图抓住表格的重点id

Here I tried to catch the focus on the form id

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

所有不成功

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

Here is a list of id's and classes the gcse tag creates

    #___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

推荐答案

使用以下CODE代码段，您将能够捕获键盘事件输入按键在搜索输入字段和鼠标点击搜索按钮上的事件。

Using the following CODE snippet you'll be able to capture keyboard event on enter key press in the search input field and mouse click event on the search button.

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

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>

以上CODE代码段使用 Google自定义搜索元素控制API。

The above CODE snippet uses Google Custom Search element control API.

这篇关于谷歌站点搜索捕获搜索提交和触发功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！