GCSE test<\/h1>\n

<\/div>\n

<\/div>\n \n\n<\/body>\n<\/html><\/pre>\n

我們添加了兩個

<\/code>，并使用特殊的類來識別應在其中呈現(xiàn)搜索表單和結果的元素。<\/p>\n

手動渲染函數(shù)<\/strong><\/p>\n

現(xiàn)在進入您的app.js文件并添加以下內容：<\/p>\n

var config = {\n  gcseId: '006267341911716099344:r_iziouh0nw', \/\/ 替換為您的搜索引擎ID\n  resultsUrl: 'http:\/\/localhost:8080', \/\/ 替換為您的本地服務器地址\n  searchWrapperClass: 'gcse-search-wrapper',\n  resultsWrapperClass: 'gcse-results-wrapper'\n};\n\nvar renderSearchForms = function () {\n  if (document.readyState == 'complete') {\n    queryAndRender();\n  } else {\n    google.setOnLoadCallback(function () {\n      queryAndRender();\n    }, true);\n  }\n};\n\nvar queryAndRender = function() {\n  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);\n  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);\n\n  if (gsceSearchForms.length > 0) {\n    renderSearch(gsceSearchForms[0]);\n  }\n  if (gsceResults.length > 0) {\n    renderResults(gsceResults[0]);\n  }\n};\n\nvar renderSearch = function (div) {\n    google.search.cse.element.render(\n      {\n        div: div.id,\n        tag: 'searchbox-only',\n        attributes: {\n          resultsUrl: config.resultsUrl\n        }\n      }\n    );\n    if (div.dataset &&\n        div.dataset.stylingFunction &&\n        window[div.dataset.stylingFunction] &&\n        typeof window[div.dataset.stylingFunction] === 'function') {\n      window[div.dataset.stylingFunction](div); \/\/ 傳遞div而不是form\n    }\n};\n\nvar renderResults = function(div) {\n  google.search.cse.element.render(\n    {\n      div: div.id,\n      tag: 'searchresults-only'\n    });\n};\n\nwindow.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};\n\n(function () {\n  var cx = config.gcseId;\n  var gcse = document.createElement('script');\n  gcse.type = 'text\/javascript';\n  gcse.async = true;\n  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +\n    '\/\/cse.google.com\/cse.js?cx=' + cx;\n  var s = document.getElementsByTagName('script')[0];\n  s.parentNode.insertBefore(gcse, s);\n})();\n<\/pre>\n
首先，我們聲明一些用于配置的變量。將您之前記下的ID放入config的gcseId<\/code>字段中。將本地index.html文件的URL放入resultsUrl<\/code>字段中。這是用戶提交查詢后搜索將重定向到的位置。此外，GCSE將期望在提供的URL上呈現(xiàn)結果字段。<\/p>\n
renderSearchForms<\/code>函數(shù)檢查頁面是否已加載，如果已加載，則調用將負責渲染queryAndRender()<\/code>的函數(shù)；或者，如果文檔尚未加載，則設置回調函數(shù)，以便稍后在文檔加載完成后返回此處。<\/p>\n
queryAndRender<\/code>函數(shù)查詢具有在config中提供的類的元素的DOM。如果找到包裝器div，則分別調用renderSearch()<\/code>和renderResults()<\/code>來呈現(xiàn)搜索和結果字段。<\/p>\n
renderSearch<\/code>函數(shù)是實際的魔法發(fā)生的地方。<\/p>\n
我們使用Google搜索API（此處有關如何使用google.search.cse.element<\/code>對象的更多文檔）來創(chuàng)建搜索框，如果存在活動查詢（結果），則創(chuàng)建結果框。<\/p>\n
render函數(shù)接受比此示例中提供的更多參數(shù)，因此如果需要進一步自定義，請務必檢查文檔。div<\/code>參數(shù)實際上接受我們要渲染搜索的div的ID，tag<\/code>參數(shù)表示我們究竟要渲染什么（results<\/em>或search<\/em>或兩者）。<\/p>\n
此外，renderSearch()<\/code>查找包裝器元素的數(shù)據(jù)屬性，如果給出了styling-function<\/em>屬性，它將查找作用域中的函數(shù)名稱并將其應用于元素。這是我們可以設置元素樣式的機會。<\/p>\n
window.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};<\/pre>\n
在此代碼片段中，我們在全局作用域中設置了一個回調變量，以便GCSE在內部使用此變量并在加載完成后執(zhí)行回調函數(shù)。這使得此方法比使用setTimeout()<\/code>解決方案來編輯輸入字段的占位符（或任何其他內容）好得多。<\/p>\n
測試運行<\/strong><\/p>
到目前為止，我們已經(jīng)包含了渲染搜索框和結果所需的一切。如果您已安裝node.js，請進入放置index.html和app.js文件的文件夾，然后運行http-server<\/code>命令。默認情況下，這將在localhost上的端口8080上提供文件夾中的內容。<\/p>\n
<\/p>\n
樣式函數(shù)<\/strong><\/p>\n
現(xiàn)在我們準備向搜索div添加自定義樣式函數(shù)。返回index.html，并在#searchForm<\/code> div上添加一個styling-function<\/code>屬性：<\/p>\n
\n\n\n    \n