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使用），这会导致我认为的冲突。已经提到类似帖子＆＃39; How to have multiple Google Custom Search field on the same page＆＃39;和＆＃39; Multiple GCSE's on page at one time＆＃39;，但那些不是我面临的情况的解决方案。 如何在同一页面中同时启用两个搜索框而不会造成冲突？

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

同一页面中的两次自定义搜索会停用搜索预测

1 个答案: