Javascript 同一页面中的两个自定义搜索将禁用搜索预测

在为更大的显示器和手机使用不同样式时，我被迫在同一页面中插入两个谷歌自定义搜索框。搜索仍然可以正常工作，但问题是插入第二个搜索框后，搜索预测不再可用

(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），我认为这会导致冲突。已经引用了类似的帖子“”和“”，但这些都不是我所面临的情况的解决方案如何使同一页面中的两个搜索框以类似的方式工作而不引起冲突？

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

但使用单个cx，您可以做到以下几点：

html:

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

演示：

CSE v2控制API和渲染参数：

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