Eigene Instant-Suche mit Google AJAX Search API

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="https://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.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Danny schrieb am 31.10.2010:

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 schrieb am 01.11.2010:

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 schrieb am 01.11.2010:

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 schrieb am 26.07.2011:

Hi Stefan, hast du einen Weg gefunden die Limitierung auf 64 Ergebnisse zu umgehen? Könnte deine Hilfe gebrauchen :) Grüße Chris

Stefan Wienströer schrieb am 27.07.2011:

Hi Christian, ich glaube bei 64 Ergebnissen wäre es besser eine Benutzerdefinierte Suche einzuführen. Anleitung: http://blog.stevieswebsite.de/2010/03/einfuhrung-benutzerdefinierte-suche/ Gruß Stefan

Cis schrieb am 10.08.2012:

Naja, die API in ihrer kostenlosen Version erlaubt nur max 100 Anfragen. Weit kommt man damit leider nicht. Zumal die Ergebnisse auf 4 Ergebnisse aufgeteilt werden. Kennt jemand eine sinnvolle alternative dazu? LG

Stefan Wienströer schrieb am 10.08.2012:

Die beste Alternative ist es vermutlich selbst eine kleine interne Suche zu basteln. Wenn deine Sachen in der Datenbank liegen, hast ja Zugriff darauf. Ansonsten gibt's auch kleine Crawler, die deine Seite crawlen und die Inhalte für die Suche in eine Datenbank schreiben.

Cis schrieb am 11.08.2012:

Danke für die zügige Rückmeldung :) Ja eine internet Suche wäre das geringste Problem, egal ob schlicht und einfach oder aber Volltextsuche. Die Google Api würde ich jetzt auch nicht unbedingt als Alternative zur eigenen internen Suche benutzen. Dafür ist das Limit arg begrenzt. Interessant wird die Api für externe Abfragen zum Datenabgleich, Analysen usw. Hat man eine Seine mit mehr als 1000 Ergebnissen im Index, Google lässt aber nur 1000 zu, so kann man da schon 250 Abfragen erzeugen, wenn man alle Datensätze holen möchte. Das Limit wäre dort schon längst ausgereizt. Die Bing Geschichte ist eher unbrauchbar. Wobei man dort in der Kostenlosen Version 5000 Anfragen im Monat bekommt, was ungefähr 160 Anfragen am Tag entsprechen. Schade das Google lieber Daten sammelt statt auch mal welche preis zu geben. LG

requi schrieb am 16.01.2013:

Bei so viel Instant brauche ich erst mal nen Kaffee...:) Bei so viel script kenn ich mich nimmer aus, weiß nicht welches nun in die Website eingefügt werden soll. ++++++ Hab s nicht gelernt ++++++ Bin kein WebMaster , kein Zimmermann und auch kein Maurer tschüß

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project