搜尋

首頁 >web前端 >js教程 >快速提示：如何手動設計Google自定義搜索

快速提示：如何手動設計Google自定義搜索

Jennifer Aniston
Jennifer Aniston原創
2025-02-17 09:42:10783瀏覽

Quick Tip: How to Style Google Custom Search Manually

核心要點

  • 通過手動渲染搜索表單（無需使用特殊的GCSE標籤），可以手動設置Google自定義搜索引擎(GCSE)的樣式，從而更好地控制搜索輸入字段並使其外觀更簡潔。
  • GCSE回調函數可以確保在更改輸入屬性之前已加載輸入。此方法比使用setTimeout方法更可靠。
  • Google搜索API可用於創建搜索框和結果框。如果存在活動查詢，則還會創建結果框。通過查閱文檔可以實現其他自定義。
  • 可以向搜索div添加自定義樣式函數以進行進一步自定義。此函數可用於更改佔位符、刪除背景以及添加在失焦時刪除背景的事件。

本文由Mark Brown審核。感謝所有SitePoint的同行評審員，他們使SitePoint的內容達到最佳狀態！

網站所有者經常選擇使用Google自定義搜索引擎(GCSE)來搜索其內容，而不是使用內置和/或自定義搜索功能。原因很簡單——工作量少得多，而且大多數情況下都能達到目的。如果您不需要高級篩選器或自定義搜索參數，那麼GCSE適合您。

在本快速提示中，我將向您展示如何手動渲染搜索表單（無需使用特殊的GCSE標籤）和結果框，這允許更精細的控制和更簡潔的搜索輸入字段樣式設置方法。

問題

通常，將GCSE添加到您的網站就像將腳本和自定義HTML標籤複製粘貼到您的網站一樣簡單。在您放置特殊GCSE標籤的位置，將呈現一個輸入搜索字段。從此字段鍵入並啟動搜索將根據先前配置的參數執行Google搜索（例如，僅搜索sitepoint.com）。

經常出現的一個問題是“如何更改GCSE輸入字段的佔位符？”。不幸的是，建議的答案通常是錯誤的，因為它使用不可靠的setTimeout方法來等待GCSE的Ajax調用完成（確保輸入已附加到DOM），然後通過JavaScript更改屬性。

我們也將查詢元素並使用JS更改屬性，但我們將使用GCSE提供的回調函數，而不是盲目地使用setTimeout()，這將保證輸入已加載。

創建GCSE帳戶

搜索引擎完全在線配置。第一步是轉到GCSE網站並單擊“添加”。按照嚮導操作，填寫您要搜索的域名（通常是您的網站URL）。現在您可以忽略任何高級設置。

單擊“完成”後，您將看到三個選項：

  1. “獲取代碼”，這將指導您完成必須複製的內容以及放置位置，以便搜索顯示在您的網站上
  2. “公共URL”將向您顯示已設置搜索的工作預覽
  3. “控制面板”用於自定義搜索

轉到“控制面板”，單擊“搜索引擎ID”，並記下此值以備後用。

HTML設置

為了嘗試一下，我們將創建一個基本的index.html，其中包含所需的HTML，以及一個包含渲染和自定義搜索所需函數的app.js文件。

繼續創建一個包含以下內容的基本HTML文件：

<code class="language-html"><!DOCTYPE html>


    <meta charset="UTF-8">
    <title>GCSE test</title>



    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    


</code>

我們添加了兩個<div>，並使用特殊的類來識別應在其中呈現搜索表單和結果的元素。 <p><strong>手動渲染函數</strong></p> <p>現在進入您的app.js文件並添加以下內容：</p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;var config = { gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址 searchWrapperClass: 'gcse-search-wrapper', resultsWrapperClass: 'gcse-results-wrapper' }; var renderSearchForms = function () { if (document.readyState == 'complete') { queryAndRender(); } else { google.setOnLoadCallback(function () { queryAndRender(); }, true); } }; var queryAndRender = function() { var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass); var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass); if (gsceSearchForms.length &gt; 0) { renderSearch(gsceSearchForms[0]); } if (gsceResults.length &gt; 0) { renderResults(gsceResults[0]); } }; var renderSearch = function (div) { google.search.cse.element.render( { div: div.id, tag: 'searchbox-only', attributes: { resultsUrl: config.resultsUrl } } ); if (div.dataset &amp;&amp; div.dataset.stylingFunction &amp;&amp; window[div.dataset.stylingFunction] &amp;&amp; typeof window[div.dataset.stylingFunction] === 'function') { window[div.dataset.stylingFunction](div); // 传递div而不是form } }; var renderResults = function(div) { google.search.cse.element.render( { div: div.id, tag: 'searchresults-only' }); }; window.__gcse = { parsetags: 'explicit', callback: renderSearchForms }; (function () { var cx = config.gcseId; 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); })(); &lt;/code&gt;</pre> <p>首先，我們聲明一些用於配置的變量。將您之前記下的ID放入config的<code>gcseId字段中。將本地index.html文件的URL放入resultsUrl字段中。這是用戶提交查詢後搜索將重定向到的位置。此外，GCSE將期望在提供的URL上呈現結果字段。

renderSearchForms函數檢查頁面是否已加載，如果已加載，則調用將負責渲染queryAndRender()的函數；或者，如果文檔尚未加載，則設置回調函數，以便稍後在文檔加載完成後返回此處。

queryAndRender函數查詢具有在config中提供的類的元素的DOM。如果找到包裝器div，則分別調用renderSearch()和renderResults()來呈現搜索和結果字段。

renderSearch函數是實際的魔法發生的地方。

我們使用Google搜索API（此處有關如何使用google.search.cse.element對象的更多文檔）來創建搜索框，如果存在活動查詢（結果），則創建結果框。

render函數接受比此示例中提供的更多參數，因此如果需要進一步自定義，請務必檢查文檔。 div參數實際上接受我們要渲染搜索的div的ID，tag參數表示我們究竟要渲染什麼（results或search或兩者）。

此外，renderSearch()查找包裝器元素的數據屬性，如果給出了styling-function屬性，它將查找作用域中的函數名稱並將其應用於元素。這是我們可以設置元素樣式的機會。 

<code class="language-javascript">window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};</code>

在此代碼片段中，我們在全局作用域中設置了一個回調變量，以便GCSE在內部使用此變量並在加載完成後執行回調函數。這使得此方法比使用setTimeout()解決方案來編輯輸入字段的佔位符（或任何其他內容）好得多。

測試運行

到目前為止，我們已經包含了渲染搜索框和結果所需的一切。如果您已安裝node.js，請進入放置index.html和app.js文件的文件夾，然後運行http-server命令。默認情況下，這將在localhost上的端口8080上提供文件夾中的內容。

Quick Tip: How to Style Google Custom Search Manually

樣式函數

現在我們準備向搜索div添加自定義樣式函數。返回index.html，並在#searchForm div上添加一個styling-function屬性：

<code class="language-html"><!DOCTYPE html>


    <meta charset="UTF-8">
    <title>GCSE test</title>



    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    


</code>

現在進入app.js，在文件的頂部，在config變量聲明下，添加一個新函數：

<code class="language-javascript">var config = {
  gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
  resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
  searchWrapperClass: 'gcse-search-wrapper',
  resultsWrapperClass: 'gcse-results-wrapper'
};

var renderSearchForms = function () {
  if (document.readyState == 'complete') {
    queryAndRender();
  } else {
    google.setOnLoadCallback(function () {
      queryAndRender();
    }, true);
  }
};

var queryAndRender = function() {
  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);

  if (gsceSearchForms.length > 0) {
    renderSearch(gsceSearchForms[0]);
  }
  if (gsceResults.length > 0) {
    renderResults(gsceResults[0]);
  }
};

var renderSearch = function (div) {
    google.search.cse.element.render(
      {
        div: div.id,
        tag: 'searchbox-only',
        attributes: {
          resultsUrl: config.resultsUrl
        }
      }
    );
    if (div.dataset &&
        div.dataset.stylingFunction &&
        window[div.dataset.stylingFunction] &&
        typeof window[div.dataset.stylingFunction] === 'function') {
      window[div.dataset.stylingFunction](div); // 传递div而不是form
    }
};

var renderResults = function(div) {
  google.search.cse.element.render(
    {
      div: div.id,
      tag: 'searchresults-only'
    });
};

window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};

(function () {
  var cx = config.gcseId;
  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);
})();
</code>

現在嘗試再次加載測試頁面，您將看到正確的佔位符。

Quick Tip: How to Style Google Custom Search Manually

結論

對於快速設置簡單的搜索，尤其是在網站只是靜態HTML的情況下，Google自定義搜索引擎非常有效。只需少量JavaScript代碼，就可以自定義搜索表單和結果頁面，為用戶提供更無縫的體驗。

您是否正在使用GCSE，或者您是否找到了更好的解決方案？請在下方評論！

關於設置Google自定義搜索樣式的常見問題解答(FAQ)

如何自定義Google自定義搜索引擎的外觀？

自定義Google自定義搜索引擎的外觀涉及使用CSS（層疊樣式表）。 CSS是一種樣式表語言，用於描述以HTML編寫的文檔的外觀和格式。您可以更改搜索引擎的顏色、字體、大小和其他元素。為此，您需要訪問可編程搜索元素控制API，該API允許您自定義搜索元素。然後，您可以將CSS添加到正確的部分以更改搜索引擎的外觀。

我可以將Google自定義搜索添加到我的網站嗎？

是的，您可以將Google自定義搜索添加到您的網站。 Google提供了一個自定義搜索JSON API，您可以使用它來發送GET請求。此API以JSON格式返回搜索結果。然後，您可以使用這些結果在您的網站上創建自定義搜索引擎。這允許您的用戶搜索您的網站或您指定的其他網站。

如何使用Google自定義搜索實現搜索框？

使用Google自定義搜索實現搜索框涉及創建搜索引擎ID，您可以在可編程搜索引擎網站上執行此操作。獲得ID後，您可以使用自定義搜索元素控制API來創建搜索框。然後，您可以使用CSS自定義此搜索框。

什麼是可編程搜索元素控制API？

可編程搜索元素控制API是由Google提供的一組函數，允許您自定義可編程搜索引擎。這包括創建搜索框、自定義搜索引擎的外觀以及控制搜索結果。

如何控制Google自定義搜索中的搜索結果？

您可以使用可編程搜索元素控制API控制Google自定義搜索中的搜索結果。此API提供允許您指定搜索的網站、返回的結果數量以及顯示結果的順序的函數。

我可以將Google自定義搜索用於商業用途嗎？

是的，您可以將Google自定義搜索用於商業用途。但是，您需要了解服務條款。例如，您不能使用搜索引擎來顯示成人內容或宣傳非法活動。

如何更改Google自定義搜索中搜索結果的顏色？

您可以使用CSS更改Google自定義搜索中搜索結果的顏色。您需要訪問可編程搜索元素控制API並將CSS添加到正確的部分。您可以更改文本、背景和其他搜索結果元素的顏色。

我可以在移動設備上使用Google自定義搜索嗎？

是的，您可以在移動設備上使用Google自定義搜索。可編程搜索引擎設計為響應式，這意味著它將調整以適應其正在查看的設備的屏幕尺寸。您還可以使用CSS自定義搜索引擎的外觀，使其更適合移動設備。

如何在我的Google自定義搜索引擎中添加徽標？

您可以使用CSS在我的Google自定義搜索引擎中添加徽標。您需要訪問可編程搜索元素控制API並將CSS添加到正確的部分。然後，您可以添加一個圖像URL以顯示為您的徽標。

我可以在沒有編碼知識的情況下使用Google自定義搜索嗎？

雖然可以在沒有編碼知識的情況下使用Google自定義搜索，但建議您對HTML和CSS有一定的了解，以便充分自定義搜索引擎。但是，Google提供了詳細的文檔和教程來幫助您入門。

以上是快速提示：如何手動設計Google自定義搜索的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript json css ajax html 回调函数 JS function 对象 作用域 事件 dom 样式表 http 搜索引擎
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：快速提示：在時間延遲後顯示模態彈出窗口下一篇：快速提示：在時間延遲後顯示模態彈出窗口

相關文章

看更多