如何从 Google 自定义搜索中的地址栏获取查询

How can I get the query from the address bar in the Google Custom Search

我的 header 中有一个搜索栏和一个单独的搜索页面,

当您在搜索栏中发出搜索请求时。它 returns 一个看起来像 '?q=querystring' 的查询字符串,它会自动将此查询字符串链接到我的搜索页面。

问题
如何从地址栏中获取查询字符串并使用它来填充 Google 自定义搜索栏。

您没有说明您使用的是什么,所以我假设您想要最简单的方法:

如果您使用的是 new Element API v2,那么您有两个选项来处理 2 页搜索:

  1. 完整渲染

Index.html

<!-- GOOGLE SEARCH JS Search Only Implementation-->
<div>
    <script>
      (function() {
        var cx = 'YOUR_API_KEY';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
      })();
    </script>
    <gcse:searchbox-only resultsUrl="search.html"></gcse:searchbox-only>
</div>

search.html

<!-- GOOGLE SEARCH JS Implementation-->
<div>
<script>
(function() {
    //Same code from Index.html
</script>
<gcse:search></gcse:search>
</div>
  1. 自定义索引 + 搜索页面呈现

您在索引页面创建您自己的搜索表单,它发送一个带有参数的 HTTP GET,您将在 queryParameterName 上挂钩该参数。这将在正在呈现的 gsce 元素中指定。例如 URL 将是 http://localhost:3939/search?search_term=Miku

Index.html

        <form method="get" action="search.html" name="searchform" id="searchform">
            <label for="words">Search:</label>
            <input name="search_term" alt="Search_term" value="" size="16" id="words" type="text" accesskey="s">
            <button type="submit" value="Submit" accesskey="g">Search</button>
        </form>

Search.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<script>
(function() {
  var cx = 'YOUR CSE KEY';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search queryParameterName="search_term"></gcse:search>
</div>
</body>
</html>

根据我处理元素 API v2 的经验,这是为数不多的可以在客户端自定义的公开挂钩之一。此外,您应该在 CSE 页面呈现您自己的代码,然后添加 queryParameterName.