2015-11-11 77 views
4

我想補充「谷歌CSE」但我不想通過谷歌創建的所有HTML和CSS,所以期待在互聯網上,我幾乎找到了解決辦法:Google CSE:其他頁面的div中的結果頁?

<!-- 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 --> 

此代碼必須在插入酒吧已經存在。

在我的控制面板上的「谷歌自定義搜索引擎」,在「佈局」一節中,我把選項只會導致

現在,當我在這個欄中搜索它會打開一個頁面:

​​ID谷歌CSE +關鍵詞搜索

它的工作原理。

但是,我想看到這些結果在我的網站頁面的div(#content)。這可能嗎?

回答

0

男孩我做了! ;) 我真的希望這個提案是許多有用的,還因爲我注意到,關於谷歌自定義搜索引擎的問題,收到很少的答案..

<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"

繪製

With options.enableSearchResultsOnly()我只繪製了結果頁,所以我的搜索欄是一個正常的搜索欄,我用方法獲取數據,實際上我的函數googlata()我通過url獲得數據(關鍵字),比我更改我的url因爲我想要一個乾淨的網址。

它是瞭解API的谷歌搜索的2.0非常重要的,我推薦閱讀:

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

再見來自意大利! :D