javascript - 如何将 Google 自定义搜索元素与现有表单元素一起使用？

Question

我正在尝试将我当前的搜索表单与 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>

我使用的 Google CSE 代码片段如下所示:

(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>');

非常感谢任何帮助。谢谢。

Answer 1

好的，感谢我的同事，我们就是这样解决的。我将它放在这里，也许它会对其他人有所帮助。

searchhelper.perform_google = function(){

    if(typeof(google)!='undefined'){
        google.search.cse.element.render({
            div: "google-search-results",
            tag: 'searchresults-only',
            gname: 'google-results-gname'
        });
        var element = google.search.cse.element.getElement('google-results-gname');
        var query = $('##search-q').val();
        element.execute(query);
    }
};

(function(){
    // add the google custom stuff:
    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];
    s.parentNode.insertBefore(gcse, s);
})();

window.__gcse = {
  parsetags: 'explicit',
  callback: function(){
    searchhelper.search('all');
  }
};