自定义 Google 自定义搜索 jsapi（查询字符串）

Question

直升机，

我正在创建 Google cse 功能进行搜索。使用此代码脚本不设置查询字符串。它无尽的刷新页面。也许有人知道他做对了吗？我只需要每个搜索不同的页面，例如： http://page.com/search?q=first+search 我可以用 parseParamsFromUrl 函数来做吗？

    <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.MINIMALIST});
google.setOnLoadCallback(function(){
var cse = new google.search.CustomSearchControl('13707349811359660237:cl5vrpn6mu8');
cse.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
cse.draw('cse');
cse.setNoResultsString('No results for this query, try a different search.');
cse.setSearchStartingCallback({}, function() {
var q = cse.getInputQuery();
window.location.search = '?q='+q;
});
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]) {
  cse.execute(urlParams[queryParamName]);
}
}, true);
</script>

如有任何帮助，将不胜感激

Answer 1

您实际上可以在 JavaScript 中实现这一点，就像您在问题中尝试的那样，并通过使用 HTML5 历史 API 而不是刷新页面来进一步改进它。我就是这样做的：

首先，我们需要 jQuery 插件来获取参数（如果您有 PHP，则不需要，但仅供参考）：

(function($) {
    $.QueryString = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

接下来是一个无需刷新即可更改地址的函数，为不支持历史 API 的旧浏览器提供回退：

function pushState(path) {
    if (typeof(window.history.pushState) == 'function') {
        window.history.pushState(null, path, path);
    } else {
        window.location.hash = '#!' + path;
    }
}

最后是 Google CSE 的代码，假设您的搜索页面位于 /search

google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
google.setOnLoadCallback(function() {
    var searchControl = new google.search.CustomSearchControl('YOUR_SEARCH_ID');
    searchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET );
    searchControl.draw('cse');
    searchControl.execute($.QueryString["q"]);
    searchControl.setSearchStartingCallback({}, function() {
            var q =  searchControl.getInputQuery();
            pushState("/search?q=" + q);
    })
}, true);

Answer 2

我自己回答了我的问题。这是工作脚本

google.load('search', '1', {language : 'lt style: google.loader.themes.MINIMALIST '});
google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('014092587915392242087:l98hzi05fja'); // change this to your unique ID
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_NEW); // open results in new window
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse'); // set the results div id
    customSearchControl.execute("<?php if (isset($_GET['q'])) echo filter_var($_GET['q'],     FILTER_SANITIZE_STRING); ?>"); // run the search using the value of $_GET['q']
    customSearchControl.setSearchStartingCallback({}, function() {
        var q =  customSearchControl.getInputQuery();
        window.location.search = '?q='+q;
    });
}, true);

现在每个搜索都会出现在 url 中