按键即时结果填充

Question

嗨，我需要像下图这样的东西

我已经实现了代码，但它只是像

一样自动填充

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

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

我需要的是 google 显示的即时结果

您好，我进行了更改，但仍然没有得到结果，请查看下图。

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

Answer 1

以下代码片段将在每次击键时填充结果。单击 Run code snippet 按钮，然后单击 Full Page 按钮以获得更好的视图，然后检查它是否满足您的要求。它使用 Google Custom Search element control 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>

按键即时结果填充

On key press instant result populating

javascript

c#

jquery

google-search

google-search-api