同じページ内で2つのカスタム検索を行うと、検索の予測が無効になる

Question

大型のディスプレイと携帯電話で異なるスタイルを使用しているうちに、の2つのGoogleカスタム検索ボックスを同じページに挿入する必要がありました。検索はまだ完全に動作しますが、問題は、第2の検索ボックスを挿入した後に検索予測が利用できなくなることです。

(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

私は現在これを試しています。同じページで2つのcseを別のcxで取得することはそれほど難しいことではありませんが、提案を機能させることはできません。 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