Ich möchte eine benutzerdefinierte Google-Suchabfrage senden, ohne die gesamte HTML-Seite neu zu laden / zu aktualisieren. Ich verwende die neuesten v2 gcs mit dem Layout "Nur Ergebnisse".

Lade die gcs api irgendwo über dem Suchformular

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

Mein benutzerdefiniertes Suchformular

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

Das gcs-Ergebnisskript wird überall dort platziert, wo die Suchergebnisse angezeigt werden sollen

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

Jede Hilfe wird geschätzt.

Vielen Dank

AKTUALISIEREN

Ich habe umgesetzt,

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

und jetzt ist mein Suchformular wie folgt:

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

Wenn Sie jedoch eine Suche durchführen, wird immer noch die gesamte Seite aktualisiert, wodurch meine anfängliche HTML-Formatierung ins Chaos gerät, bevor JQuery-Skripts gestartet werden.

Vielen Dank

AKTUALISIEREN

Ich habe alle Varianten der folgenden in zahlreichen Kombinationen hinzugefügt, aber entweder wird die gesamte Seite aktualisiert oder es passiert überhaupt nichts.

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

und so weiter...

Hat jemand Erfahrung damit? Was ist mit der JSON-API für die weitere Anpassung? Würde das das Problem der Aktualisierung der Seite irgendwie lösen?

Vielen Dank