Добавление автозаполнения в окно пользовательского поиска Google Custom Search

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

Вставьте этот код на первую страницу для автозаполнения. Не забудьте добавить свой собственный идентификатор Google ниже.

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