Google CSE: страница результата в div другой страницы?

Я хочу добавить «Google CSE», но мне не нужны все html и css, созданные Google, поэтому, поискав в Интернете, я почти нашел решение:

<!-- Google custom search box Start -by BloggerSentral.com -->
<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
 <form action='http://www.google.com/cse' target="_blank" id='cse-search-box'>
  <input name='cx' type='hidden' value='015736343358803935205:m2shzyx2lrg'/>
  <input type='text' name='q' size='35' />
  <input name='ie' type='hidden' value='ISO-8859-1'/>
  <input type="submit" name="sa" value="Search" />
 </form>
 <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div>
<!-- Google custom search box End -->

Этот код необходимо вставить в уже существующий бар.

В моей панели управления "google cse" в разделе "макет" я установил параметр Только результаты.

Теперь, когда я ищу в этой панели, он открывает страницу:

http://www.google.com/cse+ идентификатор google cse +ключевое слово, которое было найдено

и это работает.

Но я хотел бы видеть эти результаты в div (#content) страницы моего сайта. Это возможно?


javascript html google-api google-custom-search
person Borja    schedule 11.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Мальчики я сделал! ;) Очень надеюсь, что это предложение будет полезно многим, в том числе и потому, что я заметил, что на вопросы о google cse очень мало ответов..

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

google.load('search', '1'); 
google.setOnLoadCallback(googlata);


function googlata(){

var customSearchControl = new google.search.CustomSearchControl('015736343358803935205:m2shzyx2lrg'); // change this to your unique ID  
customSearchControl.setResultSetSize(20);
customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF); // open results in new window

var options = new google.search.DrawOptions();
options.setAutoComplete(true);
options.enableSearchResultsOnly()   
customSearchControl.draw('cse',options); // set the results div id  

//ottengo keyword searched  
var link= self.location.href;
var inizio = link.search("q=")+2;
var fine= link.search("&");
var keyword= (link.slice(inizio,fine)).replace('+',' ');
//

customSearchControl.setNoResultsString("<div style='padding:10px'><h2><b>Nessuno risultato per: &nbsp; "+keyword+" </b></h2><br><h3>Prova a cercare qualcosa di simile, siamo certi che potrai trovare cio' che ti interessa!</h3><br><br><br>Se il problema persiste non esitare a <a href='http://www.mywebsite.com/Contattaci'>contattarci</a>, provvederemo il prima possibile.</div>");

customSearchControl.execute(keyword);    
var newlink= link.replace('&sa=Search',''); 
history.pushState({}, null, newlink);   
}

<div id="cse" style="width:100%;">Loading</div>

В моем случае результаты будут отображаться в div id="cse"

С options.enableSearchResultsOnly() я нарисовал только страницу результатов, поэтому моя панель поиска - это обычная панель поиска, куда я отправил свои данные с помощью метода get, фактически в моей функции googlata() я беру данные, полученные по URL-адресу (ключевому слову), и затем я меняю свой URL-адрес, потому что я хочу чистый URL.

очень важно было понять API 2.0 поиска google, рекомендую прочитать:

https://developers.google.com/custom-search/docs/js/cselement-reference

до свидания из Италии! :D

person Borja    schedule 15.11.2015