On key press instant result populating

Question

Hi I need some thing like below image

I have implemented the code but its just auto populate like

I am not able to populate the result. I have implemented the google code as below

<script>

(function () {
    var cx = '011189415628571362123:google';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
   })();


<gcse:search enableautocomplete="true"></gcse:search>

What I need is instant result like google shows

Hi I made the changes but I am still not getting the result please review the below image.

 <head>

 <title></title>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

   <script>

      (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>
 </head>
 <body>  
  <div class="gcse-container" id="gcse_container">
     <gcse:search enableautocomplete="true"></gcse:search>
  </div>
</body>

take a look at jquery's .input() method (given that you listed jquery as a tag...) http://stackoverflow.com/questions/17384218/jquery-input-event — Snowmonkey, Jan 30 '17 at 16:05
Followed this link but i was also not able http://stackoverflow.com/questions/26524620/google-site-search-catch-search-submit-and-trigger-function — , Jan 30 '17 at 16:31
Did you mean that the result will show after each `key stroke` from keyboard? Remember that will mean multiple search queries for a single search. That way your search quota will be used up very quickly. — Fayaz, Jan 31 '17 at 17:47

Fayaz · Accepted Answer · 2017-02-01T05:46:54.253

The following CODE snippet will populate result on every keystroke. Click Run code snippet button & then click Full Page button for a better view & then check to see if it satisfies your requirement. It uses Google Custom Search element control API. Study that document for further customization.

(function($, window) {
  var elementName = '';
  var lastSearchTerm = '';
  var initGCSEInputField = function() {
    $( '.gcse-container form.gsc-search-box input.gsc-input' )
      .on( "keyup", function( e ) {
      if( e.which == 13 ) {
        // 13 = enter, execute custom CODE as necessary on enter
        console.log("Enter detected");
      }
      else {
        if( elementName == '' ) {
         // assuming that we have only one search element on the page
         var elements = google.search.cse.element.getAllElements();
          for( var element in elements ) {
            elementName = element;
            if( elementName != '' ) {
             break;
            }
          }
        }
        if( elementName != '' ) {
         // searching on each keystroke
          var searchTerm = $.trim( this.value );
          if( searchTerm != lastSearchTerm ) {
            // console.log( searchTerm );
            google.search.cse.element.getElement( elementName ).execute( searchTerm );
            lastSearchTerm = 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'; // 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>

Hi please review my updated answer, here in code snippet it is running very well but as i copied this on my page it is not showing the result on typing of "mi" snippet is showing result but on my page it is not showing. Do I need to place some more code which is not there in your snippet — , Feb 01 '17 at 10:20
No this snippet will work anywhere without additional CODE. You are doing wrong somewhere. What happens when you press enter? Do the results show after pressing enter? Update your question with CODE you are using. — Fayaz, Feb 01 '17 at 10:26
You haven't done anything wrong. You used CODE from my other answer. Use CODE from this answer. CODE from the other answer (the one with bounty) is according to question there. It gives a placeholder for running additional script (as asked in the question). CODE here on the other hand, auto-populates search result. Again, use CODE from this answer for auto-populate. — Fayaz, Feb 01 '17 at 10:58
Great I had again copied the code from your snippet and now it is working — , Feb 01 '17 at 11:45
Hi do you also have any idea to remove "powered by Custom Search" which comes after result? — , Feb 02 '17 at 14:24
@Xtremcool didn't try that. But please remember this is a community Q&A site, not a freelance developer service. For a different query, you need to ask a new question. — Fayaz, Feb 03 '17 at 01:20

On key press instant result populating

1 Answers1

Linked