在按键瞬间填充结果(On key press instant result populating)

您好我需要一个像下面的图片有些事

我已经实现了代码，但它只是自动填充像

我无法填充的结果。我已经实现了谷歌代码如下

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

我需要的是像谷歌即时显示结果

您好我所做的更改，但我仍然没有得到结果，请查看下面的图片。

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

下面的代码片段将填充每个按键的结果。点击Run code snippet按钮和然后单击Full Page按钮更好的视野和再检查，看它是否满足您的要求。它使用谷歌自定义搜索元素控制API 。研究进一步定制该文件。

 (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>