GCSE test<\/h1>\n

<\/div>\n

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

Nous avons ajouté deux

<\/code> et utilisé des classes spéciales pour identifier les éléments où le formulaire de recherche et les résultats doivent être présentés. <\/p>\n

Fonction de rendu manuel <\/strong> <\/p>\n

Entrez maintenant votre fichier app.js et ajoutez ce qui suit: <\/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
 Tout d'abord, nous déclarons quelques variables pour la configuration. Mettez l'ID que vous avez rédigé auparavant dans le champ gcseId<\/code> de configuration. Mettez l'URL du fichier index.html local dans le champ resultsUrl<\/code>. C'est là que la recherche sera redirigée après que l'utilisateur soumet la requête. De plus, GCSE s'attendra à rendre le champ de résultats sur l'URL fournie. <\/p>\n
 renderSearchForms<\/code> Fonction vérifie si la page est chargée, et si elle est chargée, la fonction de rappel sera responsable du rendu queryAndRender()<\/code>; Plus tard après le chargement du document. <\/p>\n
 queryAndRender<\/code> Fonction Interroge le DOM avec des éléments de la classe fournie dans la configuration. Si le div wrapper est trouvé, renderSearch()<\/code> et renderResults()<\/code> sont appelés respectivement pour rendre les champs de recherche et de résultats. <\/p>\n
 renderSearch<\/code> Les fonctions sont là où la magie réelle se produit. <\/p>\n
 Nous utilisons l'API de recherche Google (plus de documentation ici sur la fa?on d'utiliser l'objet google.search.cse.element<\/code>) pour créer la zone de recherche et s'il existe une requête active (résultat), la zone de résultat est créée. <\/p>\nLa fonction 
 Render accepte plus de paramètres que ce qui est fourni dans cet exemple, alors assurez-vous de vérifier la documentation si une personnalisation supplémentaire est requise. Le paramètre div<\/code> accepte en fait l'ID de la div que nous allons rendre, et le paramètre tag<\/code> indique ce que nous allons rendre exactement ( Résultats <\/em> ou  Rechercher <\/em> ou les deux ). <\/p>\n
 De plus, renderSearch()<\/code> trouve l'attribut de données de l'élément de wrapper, et si l'attribut de style  de style <\/em>, il recherchera le nom de la fonction dans la portée et l'appliquera à l'élément . C'est notre chance de coiffer l'élément. <\/p>\n
window.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};<\/pre>\n
 Dans cet extrait de code, nous définissons une variable de rappel dans la portée globale afin que GCSE puisse utiliser cette variable en interne et exécuter la fonction de rappel une fois le chargement terminé. Cela rend cette méthode beaucoup mieux que d'utiliser la solution setTimeout()<\/code> pour modifier l'espace réservé (ou autre chose) du champ de saisie. <\/p>\n
  Test Run <\/strong> <\/p>
 Jusqu'à présent, nous avons inclus tout ce dont nous avons besoin pour rendre la zone de recherche et les résultats. Si vous avez installé Node.js, accédez au dossier où les fichiers index.html et app.js sont placés et exécutez la commande http-server<\/code>. Par défaut, cela fournira le contenu dans le dossier du port 8080 sur localhost. <\/p>\n
  <\/p>\n
  Fonction de style <\/strong> <\/p>\n
 Maintenant, nous allons ajouter des fonctions de style personnalisé à la recherche de recherche. Return index.html et ajouter un attribut #searchForm<\/code> sur le styling-function<\/code> div: <\/p>\n
\n\n\n    \n