Eigene Instant-Suche mit Google AJAX Search API

von Stefan Wienströer+

Die meisten von euch werden schon von Google Instant gehört haben. Dabei werden Suchergebnisse bereits beim Eingeben des Suchsbegriff angezeigt. Ich habe ein Script entwickelt, mit dem du mit JavaScript deine eigene Instant-Suche erstellen kannst!

Als Basis der Suche verwende ich die Google AJAX Search API. Um diese nutzen zu können, musst du dir erst einen API-Key für deine Seite besorgen.

Mein Beispiel besteht aus den folgenden 3 Dateien:

instant.js
instant.css
index.html

Die index.html wird nachher deine Website sein. Mit dieser fangen wir auch an. Wir müssen nur die Google API und unsere anderen beiden Dateien einbinden. Die Suchbox selbst ist einfach ein div mit der id searchcontrol. Damit wir das Überlappen testen können, habe ich noch einen Beispieltext eingefügt:

index.html – HTML

<html>
  <head>
    <title>Eigene Instant-Suche</title>
    <script src="http://www.google.com/jsapi?key={APIKEY}"
      type="text/javascript"></script>
    <script src="instant.js" type="text/javascript"></script>
  <link rel="stylesheet" href="instant.css" type="text/css" />
  </head>
  <body>
    <div id="searchcontrol">Laden...</div>

  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. <br />
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. <br />
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. <br />
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. <br />
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. <br />
  </p>

  </body>
</html>

Das {APIKEY} musst du durch deinen API-Key ersetzen.

Zur Zeit hat Suchformular inkl. Ergebnisse seine feste Größe, es wird immer angezeigt und du verlierst dafür einiges an Platz. Wir blenden das Formular jedoch erst voll ein, wenn der Benutzer einen Suchbegriff eingibt. Deswegen wird vorher mit CSS alles passend positioniert. Außerdem wird die Schriftart gesetzt:

instant.css – CSS

#searchcontrol{
  overflow:hidden;
  height:40px;
  position:absolute;
  top:1px;
  z-index:2;
  font-family: Arial, Verdana;
  font-size:0.8em;
  padding:0.5em;
}

Jetzt kommt der spannende Teil: Das JavaScript!

Zunächst blenden wir mit der Funktion onLoad einige nicht benötigte Elemente, wie zum Beispiel den Suchbutton aus. Wir legen die zu durchsuchende Domain fest und konstruieren die Suche.

Die Funktion localsearch führt dann die Suche durch. Dabei wird die Höhe gesetzt und somit werden die Ergebnisse eingeblendet. Zu guter letzt wird in der Funktion noch ein weißter Hintergrund und ein Rahmen gesetzt, damit man die Ergebnisse auch lesen kann.

Die Funktion getElementByClass ist nur eine Hilfsfunktion, da wir leider nicht immer auf den Namen oder die ID des Suchformularelemente zugreifen können.

instant.js – JavaScript

  google.load("search", "1");
  var searchControl;

    function OnLoad() {
    searchControl = new google.search.SearchControl();
    searchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
    searchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

    var webSearch = new google.search.WebSearch()
    var imageSearch = new google.search.ImageSearch()

    webSearch.setSiteRestriction('stevieswebsite.de');
    imageSearch.setSiteRestriction('stevieswebsite.de');

    searchControl.addSearcher(webSearch);
    searchControl.addSearcher(imageSearch);

    var drawOptions = new google.search.DrawOptions();
    drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);

    searchControl.draw(document.getElementById("searchcontrol"), drawOptions);

        document.getElementsByName("search")[0].onkeyup = new Function("localSearch(this.value);");
        document.getElementsByName("search")[0].onclick = new Function("this.value = '';this.style.color = 'black'");
        document.getElementsByName("search")[0].value = "Suchen...";
    document.getElementsByName("search")[0].style.color = '#ccc';
    getElementByClass('gsc-search-button')[0].onclick = new Function("localSearch(document.getElementsByName('search')[0].value);");
    getElementByClass('gsc-search-box')[0].onsubmit = new Function("alert('hier');return false;");
    getElementByClass('gsc-search-button')[0].style.display = 'none';
    getElementByClass('gsc-clear-button')[0].style.display = 'none';
    }

    google.setOnLoadCallback(OnLoad);

  function localSearch(keyword){
    searchControl.execute(keyword);
    document.getElementById("searchcontrol").style.height = 'auto';
    document.getElementById('searchcontrol').style.backgroundColor = '#fff';
    document.getElementById('searchcontrol').style.border = '1px solid black';
  }

  function getElementByClass(theClass) {
    var allHTMLTags = new Array();
    var res = new Array();
    var allHTMLTags=document.getElementsByTagName("*");
    for (i=0; i<allHTMLTags.length; i++) {
      if (allHTMLTags[i].className==theClass) {
        res[res.length] =  allHTMLTags[i];
      }
    }
    return res;
  }

Um auch deine Seite zu durchsuchen, solltest du stevieswebsite.de durch deine Domain austauschen.

Jetzt ist deine Instant-Suche fertig! Du kannst den kompletten Quelcode hier herunterladen.

ToDo

Ich hab es leider noch nicht ganz gesschafft, die Suche wieder auszublenden, wenn der User irgendwoanders hinklickt. Wäre schön, wenn jemand von euch das ganze noch erweitern könnte.

10. Oktober 2010 | 5 Kommentare

Probiers aus!

Oben rechts ist das Suchformular.

Suchmöglichkeiten

Neben der normalen Websuche kann man auch Bilder, Videos, Blogs und vieles mehr durchsuchen. Wie das geht steht in der Search API Doku.

Themen

Blog Archiv

Best Of

Danny
31. Oktober 2010 @ 21:55

Hi Stevie,

erstmal vielen Dank für den tollen Artikel mit der Instant Search
Ich möchte die Instant Search demnächst auch für mein eigenes Projekt verwenden, welches in knapp 2 Wochen einen Relaunch startet.
Leider hänge ich derzeit auch noch an der unschönen Sache, dass wenn der User woanders hinklickt, sich die Box nicht schließt. Das wäre echt klasse, wenn das funktionieren würde.

Außerdem habe ich noch ein zweites Problem:
Anfangs sieht die Box gut aus (mit Transparenz).
Dann starte ich die Suche, und die Suchbox geht irgendwie in den Hintergrund der Seite.
Wenn ich dann die Suche beende und auf das X klicke, ist die Box nicht mehr im Anfangszustand, sondern in so ner Art “Mittelzustand”.

Dazu habe ich mal 3 Screenshots parat:
http://img.gfx-sector.de/img/1288554824_01.png
http://img.gfx-sector.de/img/1288554824_02.png
http://img.gfx-sector.de/img/1288554824_03.png

Eine Idee, wie man das beheben könnte?

Gruß
Danny

Stefan Wienströer
1. November 2010 @ 00:09

Versuch mal den z-index höher zu setzen. Mit dem Schließen muss ich selbst noch nachsehen, ist nicht so leicht, hab mich auch schon versucht.

Danny
1. November 2010 @ 16:03

Hi Stevie,

das mit dem z-index habe ich auch schon probiert.
Habe den mal bei #searchcontrol auf 9999 gesetzt, aber das brachte leider keinen Erfolg
Christian
26. Juli 2011 @ 22:05

Hi Stefan,

hast du einen Weg gefunden die Limitierung auf 64 Ergebnisse zu umgehen? Könnte deine Hilfe gebrauchen

Grüße
Chris