Two custom searches in same page disables search predictions

Question

While using different styles for larger displays and mobiles, I was forced to insert two google custom search boxes in same page. The search still works perfectly but the issue is that search predictions are no longer available after inserting the second search box.

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

The same code is using twice in the same page(especially repeated id usage) which causes the conflict I think. Already referred similar posts 'How to have multiple Google Custom Search field on the same page' and 'Multiple GCSE's on page at one time', but those are not solutions for the situation which I'm facing. How to enable both search boxes in same page work in a similar manner without causing conflict?

Answer 1

I'm currently experimenting with this. Getting 2 cse's with a different cx on the same page isn't that hard, but can't get the suggestions working. The v2 control api method description isn't very clear.

But with a single cx you can just do this:

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

demo: https://jsfiddle.net/501g48d4/

CSE v2 control API and render params: https://developers.google.com/custom-search/docs/element