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

GCSE test

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

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

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

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

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

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

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

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

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

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

首頁

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文件並添加以下內容：

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

登入後複製

首先，我們聲明一些用於配置的變量。將您之前記下的ID放入config的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添加到正確的部分以更改搜索引擎的外觀。