GCSE test<\/h1>\n

<\/div>\n

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

We added two

<\/code> and used special classes to identify elements where the search form and results should be presented. <\/p>\n

Manual rendering function<\/strong><\/p>\n

Now enter your app.js file and add the following: <\/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
First, we declare some variables for configuration. Put the ID you wrote down before into the gcseId<\/code> field of config. Put the URL of the local index.html file into the resultsUrl<\/code> field. This is where the search will be redirected to after the user submits the query. Additionally, GCSE will expect to render the result field on the provided URL. <\/p>\n
renderSearchForms<\/code> function checks if the page is loaded, and if it is loaded, the callback function will be responsible for rendering queryAndRender()<\/code>; or, if the document has not been loaded, set up a callback function to return this later after the document is loaded. place. <\/p>\n
queryAndRender<\/code> function query the DOM with elements of the class provided in config. If the wrapper div is found, renderSearch()<\/code> and renderResults()<\/code> are called respectively to render the search and result fields. <\/p>\n
renderSearch<\/code> Functions are where actual magic happens. <\/p>\n
 We use the Google Search API (more documentation here on how to use the google.search.cse.element<\/code> object) to create the search box and if there is an active query (result) then the result box is created. <\/p>\nThe 
render function accepts more parameters than is provided in this example, so be sure to check the documentation if further customization is required. The div<\/code> parameter actually accepts the ID of the div we are going to render, and the tag<\/code> parameter indicates what exactly we are going to render ( results<\/em> or search<\/em> or both). <\/p>\n
In addition, renderSearch()<\/code> finds the data attribute of the wrapper element, and if the styling-function<\/em> attribute is given, it will look for the function name in the scope and apply it to the element. This is our chance to style the element. <\/p>\n
window.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};<\/pre>\n
 In this code snippet, we set a callback variable in the global scope so that GCSE can use this variable internally and execute the callback function after loading is complete. This makes this method much better than using the setTimeout()<\/code> solution to edit the placeholder (or anything else) of the input field. <\/p>\n
Test run<\/strong><\/p>
 So far, we have included everything we need to render the search box and the results. If you have node.js installed, go to the folder where the index.html and app.js files are placed and run the http-server<\/code> command. By default, this will provide the contents in the folder on port 8080 on localhost. <\/p>\n
<\/p>\n
Style function<\/strong><\/p>\n
Now we are going to add custom style functions to the search div. Return index.html and add a #searchForm<\/code> attribute on the styling-function<\/code> div: <\/p>\n
\n\n\n    \n