Я хотел бы отправить пользовательский поисковый запрос Google без перезагрузки / обновления всей HTML-страницы. Я использую последнюю версию v2 gcs с надписью «Только результаты». раскладка.

Загрузка GCS API, в любом месте над формой поиска

<code><script src="//www.google.com/jsapi" type="text/javascript"></script>
<script>
    google.load('search', '1',
        {language : 'en', style : google.loader.themes.V2_DEFAULT});
</script>
</code>

Моя форма пользовательского поиска

<code><form onsubmit="return executeQuery();" id="cse-search-box-form-id">
    <input type="text" name="q" id="cse-search-input-box-id" size="25" autocomplete="off"/>
    <input type="submit" id="site-search-submit" value="search"/>
</form>
</code>

Скрипт результатов gcs, размещенный там, где нужны результаты поиска

<code><div id="cse" style="width: 100%;">Loading</div>

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

<script type="text/javascript"> 

    google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
    google.setOnLoadCallback(function() {
        var customSearchOptions = {};  
        var customSearchControl = new google.search.CustomSearchControl(
       'UNIQUE-API-KEY', customSearchOptions);
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.setAutoComplete(true);
        options.enableSearchResultsOnly(); 
        customSearchControl.draw('cse', options);
        function parseParamsFromUrl() {
            var params = {};
            var parts = window.location.search.substr(1).split('\x26');
            for (var i = 0; i < parts.length; i++) {
                var keyValuePair = parts[i].split('=');
                var key = decodeURIComponent(keyValuePair[0]);
                params[key] = keyValuePair[1] ?
                    decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
                    keyValuePair[1];

            }

            return params;

        }

        var urlParams = parseParamsFromUrl();
        var queryParamName = "q";
        if (urlParams[queryParamName]) {
            customSearchControl.execute(urlParams[queryParamName]);

        }

    }, true);

</script>
</code>

Любая помощь приветствуется.

Спасибо

UPDATE

Я реализовал,

<code>customSearchControl.execute(urlParams[queryParamName]);
</code>

и теперь моя форма поиска выглядит следующим образом:

<code><form onsubmit="customSearchControl.execute(urlParams[queryParamName]);" id="cse-search-box-form-id">
    <input type="text" name="q" id="cse-search-input-box-id" size="25" autocomplete="off"/>
    <input type="submit" id="site-search-submit" value="search"/>
</form>
</code>

Однако выполнение поиска по-прежнему обновляет всю страницу, что приводит к тому, что мое первоначальное форматирование html превращается в хаос до того, как будут запущены сценарии jquery.

Спасибо

UPDATE

Я добавил все варианты следующего в многочисленных комбинациях, но либо обновляется вся страница, либо ничего не происходит вообще.

<code><form onsubmit="return executeQuery(); return false;" id="cse-search-box-form-id">

<form onsubmit="executeQuery(); return false;" id="cse-search-box-form-id">

<form onsubmit="return false; executeQuery();" id="cse-search-box-form-id">

<form onsubmit="return false; return executeQuery();" id="cse-search-box-form-id">

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); return false;" id="cse-search-box-form-id">

<form onsubmit="return executeQuery(); event.preventDefault();" id="cse-search-box-form-id">

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); event.preventDefault();" id="cse-search-box-form-id">

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); event.stopPropagation();" id="cse-search-box-form-id">
</code>

и так далее...

Кто-нибудь имеет опыт работы с этим? А как насчет json API для дальнейшей настройки? Это решило бы проблему обновления страницы как-нибудь?

Спасибо