快速提示：如何手動設計Google自定義搜索-js教程-PHP中文網

首頁

web前端

js教程

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

Jennifer Aniston

Feb 17, 2025 am 09:42 AM

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）。現在您可以忽略任何高級設置。

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

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

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

HTML設置

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GCSE test</title>
</head>
<body>

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

</body>
</html>

我們添加了兩個<div>，並使用特殊的類來識別應在其中呈現搜索表單和結果的元素。 手動渲染函數 現在進入您的app.js文件並添加以下內容： <pre class='brush:php;toolbar:false;'>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); })(); </pre> 首先，我們聲明一些用於配置的變量。將您之前記下的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屬性，它將查找作用域中的函數名稱並將其應用於元素。這是我們可以設置元素樣式的機會。

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

在此代碼片段中，我們在全局作用域中設置了一個回調變量，以便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屬性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GCSE test</title>
</head>
<body>

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

</body>
</html>

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

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);
})();

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

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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr