GCSE test<\/h1>\n

<\/div>\n

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

我們添加了兩個(gè)

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

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

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

var config = {\n  gcseId: '006267341911716099344:r_iziouh0nw', \/\/ 替換為您的搜索引擎ID\n  resultsUrl: 'http:\/\/localhost:8080', \/\/ 替換為您的本地服務(wù)器地址\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)結(jié)果字段。 <\/p>\n
renderSearchForms<\/code>函數(shù)檢查頁面是否已加載，如果已加載，則調(diào)用將負(fù)責(zé)渲染queryAndRender()<\/code>的函數(shù)；或者，如果文檔尚未加載，則設(shè)置回調(diào)函數(shù)，以便稍後在文檔加載完成後返回此處。 <\/p>\n
queryAndRender<\/code>函數(shù)查詢具有在config中提供的類的元素的DOM。如果找到包裝器div，則分別調(diào)用renderSearch()<\/code>和renderResults()<\/code>來呈現(xiàn)搜索和結(jié)果字段。 <\/p>\n
renderSearch<\/code>函數(shù)是實(shí)際的魔法發(fā)生的地方。 <\/p>\n
我們使用Google搜索API（此處有關(guān)如何使用google.search.cse.element<\/code>對象的更多文檔）來創(chuàng)建搜索框，如果存在活動(dòng)查詢（結(jié)果），則創(chuàng)建結(jié)果框。 <\/p>\n
render函數(shù)接受比此示例中提供的更多參數(shù)，因此如果需要進(jìn)一步自定義，請務(wù)必檢查文檔。 div<\/code>參數(shù)實(shí)際上接受我們要渲染搜索的div的ID，tag<\/code>參數(shù)表示我們究竟要渲染什麼（results<\/em>或search<\/em>或兩者）。 <\/p>\n
此外，renderSearch()<\/code>查找包裝器元素的數(shù)據(jù)屬性，如果給出了styling-function<\/em>屬性，它將查找作用域中的函數(shù)名稱並將其應(yīng)用於元素。這是我們可以設(shè)置元素樣式的機(jī)會(huì)。 <\/p>\n
window.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};<\/pre>\n
在此代碼片段中，我們在全局作用域中設(shè)置了一個(gè)回調(diào)變量，以便GCSE在內(nèi)部使用此變量並在加載完成後執(zhí)行回調(diào)函數(shù)。這使得此方法比使用setTimeout()<\/code>解決方案來編輯輸入字段的佔(zhàn)位符（或任何其他內(nèi)容）好得多。 <\/p>\n
測試運(yùn)行<\/strong><\/p>
到目前為止，我們已經(jīng)包含了渲染搜索框和結(jié)果所需的一切。如果您已安裝node.js，請進(jìn)入放置index.html和app.js文件的文件夾，然後運(yùn)行http-server<\/code>命令。默認(rèn)情況下，這將在localhost上的端口8080上提供文件夾中的內(nèi)容。 <\/p>\n
<\/p>\n
樣式函數(shù)<\/strong><\/p>\n
現(xiàn)在我們準(zhǔn)備向搜索div添加自定義樣式函數(shù)。返回index.html，並在#searchForm<\/code> div上添加一個(gè)styling-function<\/code>屬性：<\/p>\n
\n\n\n    \n