加載谷歌自定義搜索不刷新頁面

結果我想提交一個谷歌定製搜索查詢，而無需重新加載/刷新整個HTML頁面。我正在使用最新的v2 gcs和「僅結果」版式。加載谷歌自定義搜索不刷新頁面

載入GCS API，搜索表單上面的任何地方

<script src="//www.google.com/jsapi" type="text/javascript"></script> 
<script> 
    google.load('search', '1', 
     {language : 'en', style : google.loader.themes.V2_DEFAULT}); 
</script>

我的自定義搜索表單

<form onsubmit="return executeQuery();" id="cse-search-box-form-id"> 
    <input type="text" name="q" id="cse-search-input-box-id" size="25" autocomplete="off"/> 
    <input type="submit" id="site-search-submit" value="search"/> 
</form>

地方選區結果腳本放在任何搜索結果中想

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

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

<script type="text/javascript"> 

    google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT}); 
    google.setOnLoadCallback(function() { 
     var customSearchOptions = {}; 
     var customSearchControl = new google.search.CustomSearchControl(
     'UNIQUE-API-KEY', customSearchOptions); 
     customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); 
     var options = new google.search.DrawOptions(); 
     options.setAutoComplete(true); 
     options.enableSearchResultsOnly(); 
     customSearchControl.draw('cse', options); 
     function parseParamsFromUrl() { 
      var params = {}; 
      var parts = window.location.search.substr(1).split('\x26'); 
      for (var i = 0; i < parts.length; i++) { 
       var keyValuePair = parts[i].split('='); 
       var key = decodeURIComponent(keyValuePair[0]); 
       params[key] = keyValuePair[1] ? 
        decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) : 
        keyValuePair[1]; 

      } 

      return params; 

     } 

     var urlParams = parseParamsFromUrl(); 
     var queryParamName = "q"; 
     if (urlParams[queryParamName]) { 
      customSearchControl.execute(urlParams[queryParamName]); 

     } 

    }, true); 

</script>

任何幫助表示讚賞。

謝謝

UPDATE

我已經實現，

customSearchControl.execute(urlParams[queryParamName]);

，現在我的搜索形式如下：

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]);" id="cse-search-box-form-id"> 
    <input type="text" name="q" id="cse-search-input-box-id" size="25" autocomplete="off"/> 
    <input type="submit" id="site-search-submit" value="search"/> 
</form>

然而，執行搜索仍刷新整個頁面，哪個在jQuery腳本啓動之前引發我的初始html格式混亂。

感謝

UPDATE

我已經添加了所有品種以下的多種組合，但無論是整個頁面刷新或沒有任何反應都沒有。

<form onsubmit="return executeQuery(); return false;" id="cse-search-box-form-id"> 

<form onsubmit="executeQuery(); return false;" id="cse-search-box-form-id"> 

<form onsubmit="return false; executeQuery();" id="cse-search-box-form-id"> 

<form onsubmit="return false; return executeQuery();" id="cse-search-box-form-id"> 

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); return false;" id="cse-search-box-form-id"> 

<form onsubmit="return executeQuery(); event.preventDefault();" id="cse-search-box-form-id"> 

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); event.preventDefault();" id="cse-search-box-form-id"> 

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); event.stopPropagation();" id="cse-search-box-form-id">

等等...

任何人有這方面的經驗？如何進一步定製json api？這會解決頁面刷新問題嗎？

謝謝

來源

2012-04-05 ifthatdoesntdoit

需要調用

customSearchControl.execute（urlParams [queryParamName]）;

每當你需要搜索。所以在表單上提交時使用該函數。

，而解決這個問題，我已經安裝了它在我自己的網站。你可以check it out here。

基本上，我只補充提交處理通過jQuery形成和所做的一切，谷歌提交處理程序中所做的工作。作品完美無瑕。

來源

2012-04-05 02:14:19 iamgopal

謝謝你的迴應，iamgopal。這是否會執行查詢並更新搜索結果而不重新加載頁面？我如何使用jquery .on（）來完成表單提交？或者，還有更好的方法？謝謝。 – ifthatdoesntdoit 2012-04-05 02:30:11

add return false;以提交。所以它不會重新加載整個頁面。 – iamgopal 2012-04-05 05:25:41

我已經嘗試了以上，沒有什麼是停止刷新頁面。這是殺了我的設計。我有一個隱藏的面板，可以在搜索表單的點擊或提交事件中淡入。任何一個都是無用的，因爲一旦頁面刷新一切都會被丟棄，並且jquery/javascript必須重新開始。 – ifthatdoesntdoit 2012-04-06 01:43:21

最好的辦法是使用jQuery創建掛鉤。下面的下面的代碼將創建搜尋]和SearchResult所只之間的鉤完成時渲染。

爲了使此設置生效，您需要爲元素指定gname，否則您將無法通過google.cse.element方法找到它。我有一個live version下面的代碼，但我沒有承諾，因爲它是在我的NDSU FTP中託管，所以永遠不會生效。

的Index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Google Search Customization</title> 
    <script src="https://code.jquery.com/jquery-1.12.1.js"></script> 
    <script src="index.js"></script> 
    </head> 
    <body> 
    <h1>Trigger an Element API v2 search through a custom textbox</h1> 
    <label>Enter Search Query:</label><input id="customSearchText" type="text"> 
    <input id="customSearch" type="submit"> 
    <div style="width: 50%; float: right;"> 
     <gcse:searchresults-only gname="searchOnlyCSE"></gcse:searchresults-only> 
    </div> 
    </body> 
</html>

index.js

//Hook a callback into the rendered Google Search. From my understanding, this is possible because the outermost rendered div has id of "___gcse_0". 
window.__gcse = { 
    callback: googleCSELoaded 
}; 
function googleCSELoaded() { 
    // The hook in question. 
    $("#customSearch").click(function() { 
    var searchText = $("#customSearchText").val(); 
    console.log(searchText); 
    var element = google.search.cse.element.getElement('searchOnlyCSE'); 
    element.execute(searchText); 
    }) 
} 

// CSE Code. This is a free version, so please don't make too many requests. 
(function() { 
    var cx = '001386805071419863133:cb1vfab8b4y'; 
    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); 
})();

來源

2016-03-02 17:37:41 Deovandski

加載谷歌自定義搜索不刷新頁面

回答

相關問題