Question

我想提交一个谷歌自定义搜索查询，而无需重新加载/刷新整个HTML页面。我正在使用最新的v2 gcs和'仅结果'布局。

在搜索表单上方的任何位置加载gcs api

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

我的自定义搜索表单

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

将gcs结果脚本放置在需要搜索结果的位置

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

感谢任何帮助。

谢谢

更新

我已实施，

customSearchControl.execute(urlParams[queryParamName]);

现在我的搜索表格如下：

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

然而，执行搜索仍会刷新整个页面，这会在启动jquery脚本之前将我的初始html格式化引入混乱。

由于

更新

我已经在多种组合中添加了以下所有类型，但整个页面都刷新或根本没有发生任何事情。

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

依旧......

任何人都有这方面的经验吗？ json api如何进一步定制？这会以某种方式解决页面刷新的问题吗？

谢谢

Answer 1

你需要打电话

customSearchControl.execute（urlParams [queryParamName]）;

无论何时需要搜索。所以在表单上的onsubmit中使用该函数。

在解决这个问题时，我已经在我自己的网站上设置了它。你可以check it out here。

基本上我只是通过jquery添加提交处理程序，并完成了google在提交处理程序中所做的所有工作。完美无瑕。

Answer 2

最好的选择是使用JQuery来创建钩子。以下代码将在渲染完成后在 searchButton 和仅搜索结果之间创建一个挂钩。

要使此设置生效，您需要为元素指定gname，否则您将无法通过google.cse.element方法找到它。我有一个live version代码，但我不会做出承诺，因为它是在我的NDSU FTP中托管的。

<强>的index.html

mysqli

<强> index.js

<!DOCTYPE html>
<html>
  <head>
    <title>Google Search Customization</title>
    <script src="https://code.jquery.com/jquery-1.12.1.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <h1>Trigger an Element API v2 search through a custom textbox</h1>
    <label>Enter Search Query:</label><input id="customSearchText" type="text">
    <input id="customSearch" type="submit">
    <div style="width: 50%; float: right;">
      <gcse:searchresults-only gname="searchOnlyCSE"></gcse:searchresults-only>
    </div>
  </body>
</html>

加载Google自定义搜索结果而不刷新页面

2 个答案: