【发布时间】：2017-08-21 16:06:43
【问题描述】：
我正在尝试将我当前的搜索表单与 Google 的自定义搜索元素一起使用，但到目前为止我无法让它工作。这是我当前的搜索表单。
<form class="search-form" action="/search/">
<p class="inputs">
<label for="search-q">Search</label>
<input type="search" id="search-q" name="search" data-gname="search"placeholder="Find what you're looking for..." value="#formatted_query#">
<input type="submit" value="Go" class="button postfix brand-orange-bk">
</p>
</form>
我使用的谷歌CSE代码sn-p如下图：
(function() {
var cx = '004626212387516433456:aex2tyveipy';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
$('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');
在结果（在同一页面上）中，我有以下内容：
<div class="row">
<div class="small-12 medium-5 medium-push-7 large-5 large-push-7 columns" id="search-rightcol">
<section data-searchtab="our-own-knowledgebase" class="search-panel brand-white-bk"></section>
</div>
<div class="small-12 medium-7 medium-pull-5 large-7 large-pull-5 columns">
<div id="google-search-results"></div>
</div>
</div>
我可以使用 gcse:searchbox-only 标签代替我当前的表单，然后我会设置它的样式；但是，当我按下搜索按钮时，它会转到另一个页面，结果不会显示在 google-search-results div 中。如果我使用 gcse:search 标记，那么结果将替换当前页面上的所有内容并忽略这行代码：
$('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');
我查看了HTML5-valid div tags、Custom Search Element Control API (V2) 和Using the JavaScript API to render elements，但我不清楚在我的情况下如何修改代码，因此我可以简单地传递输入元素中的任何值到 Google CSE 代码进行搜索，然后我将结果放在 google-search-results div 中。在Custom Search Element Control API (V2) 的示例中，它显示了以下代码：
var element = google.search.cse.element.getElement('element1);
element.execute('news');
所以我尝试了以下代码，但没有成功...没有结果显示/返回。
(function() {
var cx = '004626212387516433456:aex2tyveipy';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
//gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
//var s = document.getElementsByTagName('script')[0];
var s = google.search.cse.element.getElement('search');
// do the search:
var searchTerm = $('##search-q').val();
s.execute(searchTerm);
s.parentNode.insertBefore(gcse, s);
})();
$('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');
我找到了一个类似的线程 (How to use custom search box for google custom search?)，但该线程没有解决方案。我还找到了另一个线程（How to style Google Custom Search Engine so that it doesn't display as a block element），但我遇到的问题是，每当我点击搜索时，它会转到另一个页面而忽略此代码：
$('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');
非常感谢任何帮助。谢谢。
【问题讨论】：
-
从未使用过 gcse 但你应该在 jquery 标识符中有 2 个主题标签吗？我在这里问可能是错的。
-
那是 ColdFusion 的东西。我第一次使用时也很困惑。
标签： javascript jquery css search google-custom-search