Два пользовательских запроса на одной странице запрещают поисковые предсказания

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), который вызывает конфликт, я думаю. Уже упомянутые аналогичные должности «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 на одной странице не так уж сложно, но не может заставить предложения работать. Описание метода api управления v2 не очень понятно.

Но с одним сх вы можете просто сделать это:

HTML:

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

ЯШ:

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