Zwei benutzerdefinierte Suchen auf derselben Seite deaktiviert Suchvorhersagen

Question

Während ich verschiedene Stile für größere Displays und Handys verwendet, wurde ich gezwungen, zwei Google benutzerdefinierte Suchfelder auf der gleichen Seite einfügen. Die Suche funktioniert immer noch einwandfrei, aber das Problem ist, dass Suchvorhersagen sind nicht mehr verfügbar nach dem Einfügen der zweiten Suchfeld.

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

Der gleiche Code wird zweimal in der gleichen Seite mit (vor allem wiederholt id Nutzung), die den Konflikt verursacht, denke ich. Bereits verwiesen ähnliche Beiträge 'How to have multiple Google Custom Search field on the same page' und 'Multiple GCSE's on page at one time', aber das sind keine Lösungen für die Situation, die ich gegenüberstehen. Wie funktioniert die Aktivierung beider Suchfelder auf derselben Seite in ähnlicher Weise, ohne Konflikte zu verursachen?

Answer 1

Ich experimentiere gerade mit diesem. 2 cse's mit einem anderen cx auf der gleichen Seite zu bekommen, ist nicht so schwer, aber die Vorschläge können nicht funktionieren. Die Beschreibung der v2-Kontroll-API-Methode ist nicht sehr klar.

Aber mit einem einzigen cx Sie können dies nur tun:

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 Steuer API und render params: https://developers.google.com/custom-search/docs/element