Google Custom search trigger for concatenated text

Question

I am using google custom search:

1- I write a text "A" into google search box,

2- when I click on the search button or hit enter, javascript function_1/function_2 will concatenate the text "B" (text that comes from an html text box, see the code example attached) to the text "A", then the search will be triggered for the concatenated text( "A" with "B").

But, It looks like google search processor trigger the search first for only the text "A" and then the concatenation is done.. That's not What I want. I want the search to be done for the concatenated text.

See the code example attached, and please let me know for any solution.

<div class="gcse-container" id="gcse_container">
  <gcse:search enableAutoComplete="true"></gcse:search>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script>    
(function($, window) {
  var elementName = '';
  var initGCSEInputField = function_1() {
    $( '.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 != '' ) {
       var elements = document.getElementById("firstname").value;
            this.value  += elements;
        }
      }
    });
    $( '.gcse-container form.gsc-search-box input.gsc-search-button' )
      .on( "click", function_2( e ) {
      var searchTerm = $.trim( $( '.gcse-container form.gsc-search-box input.gsc-input' ).val() );
      if( searchTerm != '' ) {
          var elements = document.getElementById("firstname").value;
          searchTerm +=elements;
          $( '.gcse-container form.gsc-search-box input.gsc-input').val(searchTerm);  
      }
    });
  };

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

 

Answer 1

manually change search string is not a good idea, so don't do

$( '.gcse-container form.gsc-search-box input.gsc-input').val(searchTerm);  

instead, you can use prefillQuery and execute api provided by google for this particular purpose. Try run following code snippet and search "test", it will append "junit" to the query string.

<div class="gcse-container" id="gcse_container">
  <gcse:search enableAutoComplete="true"></gcse:search>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script>    

(function($, window) {
	var cseElement
	var first_name = ' junit'
  const initGCSEInputField = function() {
    $( '.gcse-container form.gsc-search-box input.gsc-input' )
      .on( "keyup", function( e ) {

    });
    $( '.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() );      
      //use google api to prefill your query string and programmatically execute query
				cseElement.prefillQuery(searchTerm + first_name)
        cseElement.execute(searchTerm + first_name)
    });
  };

  var GCSERender = function() {
		cseElement = 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';
  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>