カスタム検索ボックスにオートコンプリートを追加するGoogleカスタム検索

Question

現在Googleカスタム検索を使用して結果ページにオートコンプリート機能がありますが、別のカスタム検索ボックスでオートコンプリート表示を表示するにはどうすればよいですか？

<script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $("#googleCseSearchTextBox").keypress(function (e) { 
 
       var code = (e.keyCode ? e.keyCode : e.which); 
 
       if (code == 13) { //Enter keycode 
 
        googleCseSubmit(); 
 
        return false; 
 
       } 
 
      }); 
 

 
      $("#googleCseSearchButton").click(googleCseSubmit); 
 
     }); 
 

 
     function googleCseSubmit() { 
 
      window.location.href = "my site and key" + $('<div/>').text($("#googleCseSearchTextBox").val()).html(); 
 
     }; 
 
</script>

カスタム検索ボックス：

<div> 
 
\t <fieldset class="sfsearchBox"> 
 
     <input name="googleCseSearchTextBox" type="text" id="googleCseSearchTextBox" class="sfsearchTxt" /> 
 
     <input type="button" value="Search" id="googleCseSearchButton" class="sfsearchSubmit" /> 
 
    </fieldset> 
 
</div>

おかげ

Answer 1

はAUTOCのためのあなたの最初のページにこのコードを挿入オプション。下に独自のGoogle IDを追加することを忘れないでください。

<script src="http://www.google.com/jsapi" type="text/javascript"></script> 

<script type="text/javascript"> 
    google.load('search', '1'); 

    google.setOnLoadCallback(function(){ 
     google.search.CustomSearchControl.attachAutoCompletion(
      'your-google-search-id', 
      document.getElementById('search-field'), 
      'search-form'); 
    }); 
</script> 

<!-- example search form --> 
<form id="search-form" action="/search"> 
    <input id="search-field" name="search-field" type="text" /> 
    <input type="submit" value="Search" /> 
</form> 

また、複数の基準

https://developers.google.com/web-search/docs/

についてはこちらをご確認ください