GCSE test<\/h1>\n

<\/div>\n

<\/div>\n \n\n<\/body>\n<\/html><\/pre>2つの<

を追加し、特別なクラスを使用して、検索フォームと結(jié)果を提示する要素を識(shí)別しました。

<\/code>\n<\/p>

マニュアルレンダリング関數(shù)<\/strong>\n<\/p>app.jsファイルを入力して、次のものを追加します。\n

\n<\/p>最初に、構(gòu)成用のいくつかの変數(shù)を宣言します。書(shū)いたIDを前に下に置いて、構(gòu)成のフィールドに入れます。ローカルindex.htmlファイルのURLを

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>フィールドに入れます。これは、ユーザーがクエリを提出した後に検索がリダイレクトされる場(chǎng)所です。さらに、GCSEは、提供されたURLで結(jié)果フィールドをレンダリングすることを期待します。 
\ngcseId<\/code>resultsUrl<\/code>関數(shù)ページが読み込まれているかどうか、およびコールバック関數(shù)がレンダリングに責(zé)任を負(fù)います。後でドキュメントがロードされた後。 <\/p>\n
renderSearchForms<\/code>function configで提供されるクラスの要素を使用してDOMをクエリします。ラッパーdivが見(jiàn)つかった場(chǎng)合、検索フィールドと結(jié)果フィールドをレンダリングするために、それぞれqueryAndRender()<\/code>および<\/p>が呼び出されます。 
\nqueryAndRender<\/code>renderSearch()<\/code>関數(shù)は、実際の魔法が発生する場(chǎng)所です。 renderResults()<\/code>\n<\/p> Google Search API（オブジェクトの使用方法に関するドキュメントの詳細(xì)）を使用して検索ボックスを作成し、アクティブクエリ（結(jié)果）がある場(chǎng)合は結(jié)果ボックスが作成されます。 
\nrenderSearch<\/code>レンダリング関數(shù)は、この例で提供されているよりも多くのパラメーターを受け入れるので、さらなるカスタマイズが必要な場(chǎng)合は、ドキュメントを確認(rèn)してください。 <\/p>パラメーターは、実際にレンダリングするdivのIDを受け入れ、
パラメーターは正確にレンダリングするものを示します（google.search.cse.element<\/code>結(jié)果<\/p>または
検索div<\/code>またはその両方）。 tag<\/code>\nさらに、<\/em>ラッパー要素のデータ屬性を見(jiàn)つけます。スタイリング機(jī)能<\/em>屬性が指定されている場(chǎng)合、範(fàn)囲內(nèi)の関數(shù)名を探して要素に適用します。 。これが要素をスタイリングするチャンスです。 <\/p>\n
\nこのコードスニペットでは、GCSEがこの変數(shù)を內(nèi)部で使用し、読み込み後にコールバック関數(shù)を?qū)g行できるように、グローバルスコープにコールバック変數(shù)を設(shè)定します。これにより、このメソッドは、renderSearch()<\/code>ソリューションを使用して、入力フィールドのプレースホルダー（またはその他のもの）を編集するよりもはるかに優(yōu)れています。 \n<\/em><\/p>テスト実行
window.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};<\/pre>
これまでのところ、検索ボックスと結(jié)果をレンダリングするために必要なすべてを含めました。 node.jsがインストールされている場(chǎng)合は、index.htmlおよびapp.jsファイルが配置され、http-server<\/code>コマンドを?qū)g行するフォルダーに移動(dòng)します。デフォルトでは、これにより、LocalHostのポート8080のフォルダーに內(nèi)容が提供されます。 <\/p>\n
 <\/p>\n
スタイル関數(shù)<\/strong><\/p>\n
ここで、検索divにカスタムスタイル関數(shù)を追加します。 index.htmlを返し、#searchForm<\/code> divにstyling-function<\/code>屬性を追加します：<\/p>\n
\n\n\n    \n