Google site search catch search submit and trigger function

Question

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.

Things I have tried sofar

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');
    });

Here I tried to catch the focus on the form id

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

All unsuccessfull

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

Answer 1

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>

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