On key press instant result populating

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>

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>