javascript - 同一页面中的两个自定义搜索会禁用搜索预测

Question

在为更大的显示屏和移动设备使用不同的样式时，我被迫在同一页面中插入两个 Google 自定义搜索框。搜索仍然可以完美运行，但问题是插入第二个搜索框后搜索预测不再可用。

(function() {
    var cx = '*****************:**********';
    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);
})();

相同的代码在同一页面中使用两次(尤其是重复使用 id)，我认为这会导致冲突。已经提到了类似的帖子'How to have multiple Google Custom Search field on the same page '和'Multiple GCSE's on page at one time '，但这些并不是我所面临的情况的解决方案。 如何使同一页面中的两个搜索框以类似的方式工作而不引起冲突？

Answer 1

我目前正在尝试这个。在同一页面上使用不同的 cx 获取 2 个 cse 并不难，但无法使建议发挥作用。 v2控件api方法描述不是很清楚。

但是只需一个 cx，您就可以执行以下操作:

html:

<div id="first"></div>
<br/>
<div id="second"></div>

js:

var renderSearchElement = function() {
    google.search.cse.element.render({
        div: "first",
        tag: 'search'
    });
    google.search.cse.element.render({
        div: "second",
        tag: 'search'
    });
};

var myCallback = function() {
    if (document.readyState == 'complete') {
        renderSearchElement();
    } else {
        google.setOnLoadCallback(renderSearchElement, true);
    }
};

window.__gcse = {
    parsetags: 'explicit',
    callback: myCallback
};

var loadElements = function() {
    var cx = '*****************:**********';
    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);
}

loadElements();

演示: https://jsfiddle.net/501g48d4/

CSE v2 控制 API 和渲染参数:https://developers.google.com/custom-search/docs/element