Google Custom Search Engine: verschil tussen versies

Versie van 26 mrt 2019 om 10:50

Met behulp van GCSE (Google Custom Search Element of - Engine) - voorheen Google Site Search - biedt de mogelijkheid om met de Google zoekmachine de eigen website te doorzoeken. Tevens integreert en presenteert de zoekmachine de zoekresultaten binnen de omgeving van de eigen website.

Voorbeeld

Dit is een voorbeeld van een gas-element dat zoek in de wiki van theaterencyclopedie.nl:

<script>
  (function() {
    var cx = '018439257105187159561:8ydlp_ajuk0';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Het resultaat hiervan ziet er zo uit:

Voorbeeld 2 - Bootstrap styling

Zie ook

Extensie:GoogleSiteSearch, een extensie met vergelijkbare functionaliteit, Tevens volledige vervanging van de eigen MediaWiki-zoekmachine.

@@ Regel 32: / Regel 32: @@
 </script>
 <gcse:search></gcse:search>
+</html>
+== Voorbeeld 2 - Bootstrap styling ==
+<html>
+<script>
+  (function() {
+    var cx = '018439257105187159561:8ydlp_ajuk0';
+    var gcse = document.createElement('script');
+    gcse.type = 'text/javascript';
+    gcse.async = true;
+    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+    var s = document.getElementsByTagName('script')[0];
+    s.parentNode.insertBefore(gcse, s);
+  })();
+</script>
+<script>
+  function executeQuery() {
+    var input = document.getElementById('cse-search-input-box-id');
+    var element = google.search.cse.element.getElement('searchresults-only0');
+    if (input.value == '') {
+      element.clearAllResults();
+    } else {
+      element.execute(input.value);
+    }
+    return false;
+  }
+</script>
+<gcse:searchresults-only></gcse:searchresults-only>
+<form class="navbar-form navbar-right" id="cse-search-box-form-id" onsubmit="return executeQuery();" role="search">
+  <div class="input-group">
+    <input type="text" class="form-control" id="cse-search-input-box-id" size="25" autocomplete="off">
+    // MAKE SURE TO PUT THIS JS SCRIPT
+    <script async type="text/javascript"
+      src="//cse.google.com/cse/brand?form=cse-search-box-form-id&inputbox=cse-search-input-box-id">
+    </script>
+    <span class="input-group-btn">
+      <button type="submit" class="btn btn-default">
+        <span class="glyphicon glyphicon-search"></span>
+      </button>
+    </span>
+  </div>
+</form>
 </html>