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

Try delegating as in `$(document).on("keypress", "#gsc-i-id1", function(){alert("T")})`. Like your first example, just I don't think the `input` is being `submit`ted — JNF, Oct 23 '14 at 11:02
This does capture the key and triggers the event. How would I go about only triggering it on enter being pressed? $(document).on("keypress", "#gsc-i-id1", function(e){if(e == 13) { alert("T")}}) ??? — Ernie, Oct 23 '14 at 12:47
`if ( event.which == 13 ) { alert("T"); }`. [Documentation](http://api.jquery.com/keypress/) suggests `keyup` better for such a feature (it works the same way, just change the event name). — JNF, Oct 26 '14 at 06:38
Also, consider using `event.preventDefault();` if you want to trigger something else on the same event. — JNF, Oct 26 '14 at 06:39
@NateW i had tried putting link to different js fiddle but for that i am not able to autopopulate the result. I am just able to populate the search text — , Jan 31 '17 at 16:56
@NateW what i actually need is in this link http://stackoverflow.com/questions/41940316/on-key-press-instant-result-populating — , Jan 31 '17 at 16:57

score 0 · Answer 1 · edited May 23 '17 at 11:53

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.

Can you give me just 1 example with code where on inserting text the search result get auto populate? — , Jan 31 '17 at 17:39
can u please review this link I want this to be done http://stackoverflow.com/questions/41940316/on-key-press-instant-result-populating Dont know how to achieve — , Jan 31 '17 at 17:42

Google site search catch search submit and trigger function

1 Answers1

Linked