GCSE test<\/h1>\n

<\/div>\n

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

\n

<\/code> Wir haben zwei <\/p> hinzugefügt und spezielle Klassen verwendet, um Elemente zu identifizieren, bei denen das Suchformular und die Ergebnisse vorgestellt werden sollten.

\n <\/strong> Manuelle Rendering -Funktion <\/p>

\n<\/p> Geben Sie jetzt Ihre App.js -Datei ein und fügen Sie Folgendes hinzu:

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
\ngcseId<\/code> Erstens deklarieren wir einige Variablen für die Konfiguration. Geben Sie die ID, die Sie zuvor geschrieben haben, in das Feld resultsUrl<\/code> konfiguriert. Legen Sie die URL der lokalen Index.html -Datei in das Feld <\/p> ein. Hier wird die Suche nach dem Einreichen der Abfrage nach dem Benutzer umgeleitet. Darüber hinaus wird GCSE erwarten, dass das Ergebnisfeld auf der bereitgestellten URL rendert. 
\nrenderSearchForms<\/code> queryAndRender()<\/code> Funktionsprüfungen Wenn die Seite geladen ist und sie geladen ist, ist die Rückruffunktion für die Wiedergabe von <\/p> verantwortlich. Sp?ter nach dem Laden des Dokuments. 
\nqueryAndRender<\/code> renderSearch()<\/code> Funktion Abfragen Sie das DOM mit Elementen der in der Konfiguration bereitgestellten Klasse. Wenn die Wrapper Div gefunden wird, werden renderResults()<\/code> und <\/p> jeweils aufgerufen, um die Such- und Ergebnisfelder zu rendern. 
\nrenderSearch<\/code> <\/p> Funktionen sind dort, wo die tats?chliche Magie passiert. 
\ngoogle.search.cse.element<\/code> Wir verwenden die Google -Search -API (weitere Dokumentation hier, um das Objekt <\/p> zu verwenden), um das Suchfeld zu erstellen, und wenn eine aktive Abfrage (Ergebnis) vorliegt, wird das Ergebnisfeld erstellt. 
\nDie Funktion div<\/code> Render akzeptiert mehr Parameter als in diesem Beispiel. überprüfen Sie daher die Dokumentation, wenn eine weitere Anpassung erforderlich ist. Der Parameter tag<\/code> akzeptiert tats?chlich die ID des DIV, die wir rendern werden, und der Parameter  zeigt an ). <\/em>\n findet au?erdem <\/em> das Datenattribut des Wrapper-Elements, und wenn das Attribut <\/p> Styling-Funktion 
 angegeben ist, wird nach dem Funktionsnamen im Bereich des Geltungsbereichs gesucht und auf das Element angewendet . Dies ist unsere Chance, das Element zu stylen. renderSearch()<\/code>\n\n<\/em> In diesem Code -Snippet setzen wir eine Rückrufvariable im globalen Bereich, damit GCSE diese Variable intern verwenden und die Rückruffunktion nach Abschluss des Ladens ausführen kann. Dies macht diese Methode viel besser, als die <\/p> -L?sung zu verwenden, um den Platzhalter (oder irgendetwas anderes) des Eingabefeldes zu bearbeiten. 
window.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};<\/pre>\n
 setTimeout()<\/code> Testlauf <\/p> 
 Bisher haben wir alles aufgenommen, was wir brauchen, um das Suchfeld und die Ergebnisse zu rendern. Wenn Sie Node.js installiert haben, gehen Sie zum Ordner, in dem die Dateien index.html und app.js platziert sind, und führen Sie den Befehl http-server<\/code> aus. Standardm??ig liefert dies den Inhalt im Ordner auf Port 8080 auf Localhost. <\/p>\n
  <\/p>\n
  Stilfunktion <\/strong> <\/p>\n
 Jetzt werden wir der Suchdiv benutzerdefinierte Stilfunktionen hinzufügen. Return index.html und fügen Sie ein #searchForm<\/code> -Merkmals auf das styling-function<\/code> div: <\/p> hinzu\n
\n\n\n    \n