Legyen kereső az oldaladon

Annyira hozzá vagyunk szokva, hogy az interneten minden tartalom kereshető, hogy ma már nagyon amatőrnek tűnnek azok a weboldalak, ahol nem találunk keresődobozt. Szerencsére a Google AJAX Search API segítségével nagyon könnyen beépíthetjük a Google keresőjét a saját weboldalunkba.

A Google AJAX Search API egy JavaScriptes programozói felület, tehát ha tudunk a szerverünkön az egyik oldal forrásába JavaScript kódot írni, akkor használhatjuk, nem fog kelleni hozzá semmilyen szerver oldali technológia. Korábban létezett webszolgáltatás interfész is, azonban arról a SOAP API-ról most azt mondja a Google, hogy az csak egy “free experiment” volt limitációkkal, helyette inkább használjuk az AJAXos API-t, ami Firefox 1.5+, IE 6, Safari, Opera 9+ és Chrome böngészőkön támogatott. Hát rajta!

Az első lépés, hogy az oldalunk forráskódjában ki kell jelölnünk egy helyet, ahol a kereső meg fog jelenni. Egy gyakorlatilag egy div konténer, aminek a kezdeti tartalmát a késleltetve betöltött és megjelenített kereső felül fogja csapni (ha mégis megjelenik, akkor valamit rosszul csináltunk):

  <div id="searchPlaceholder">
    Betöltés, türelem...
  </div>

A kereső által renderelt tartalom az oldalunkon belül fog futni, div, table és form elemek kerülnek az oldalunkba (nincs szó iframe-ről). A generált layout minden szintjén találunk egy gsc- (gsc: Google Search Control) kezdetű CSS osztályt, ami segíthet a megjelenő tartalom megformázásában. Ezek közül a legkülső a gsc-control, ami alapértelmezés szerint 300px széles, ami többnyire nem éppen a legjobb helykihasználást eredményezi, húzzuk szét bátran:

  .gsc-control
  {
    width: 100%;
  }

Fontos, hogy mivel a kereső hoz magával CSS-t, azt felülcsapni csak akkor tudjuk, ha a kereső JavaScriptje utánra tesszük a saját CSS definíciónkat. Ennyit a dizájnról és a layoutról, térjünk át a kódra.

Az oldalban el kell helyeznünk egy script tag-et, ami letölti a kereső kódját a Google szerveréről:

  <script src="http://www.google.com/jsapi" type="text/javascript"></script>

Regisztrálhatunk egy AJAX API key-ért, amiről a gugli azt mondja, hogy teljesen opcionális, azonban ha valamit elrontanánk, ennek segítségével ők megpróbálhatják felvenni velünk a kapcsolatot. Ha nem szeretjük a nagy testvér effektust, akkor elég a fenti sor.

Ha már az oldal betöltésekor meg kívánjuk jeleníteni a keresőt, akkor a Google AJAX API Loader google.load metódusát kell használnunk (van lehetőség dinamikus betöltésre is JSONP stílusban). Ennek ez legegyszerűbb formája, a kód magáért beszél:

  google.load("search", "1");    
  function onGoogleLoaded()
  {      
    // Itt rakjuk majd össze a keresőt...
  }

  google.setOnLoadCallback(onGoogleLoaded);

A load metódusnak át kell adnunk, hogy melyik API-t (search, maps, feeds, language, gdata, earth, visualization, friendconnect, orkut) akarjuk használni, illetve hogy annak melyik verzióját. Harmadik paraméterként átadhatunk kapcsolókat, amivel elhagyhatjuk a CSS-t, a régi névtereket és magyar GUI-t kérhetünk:

  google.load("search", "1", { "nocss": true, "nooldnames": true, "language" : "hu" });    

Nincs más hátra, az onGoogleLoaded callback metódusunkban fel kell konfigurálnunk a keresőt, amihez létre kell hoznunk egy SearchControl objektumot:

  var ctrl = new google.search.SearchControl();

A ctrl objektumunkhoz hozzá kell adnunk ún. searcher objektumokat, amik a különböző forrásokban keresnek:

  ctrl.addSearcher( new google.search.WebSearch() );
  ctrl.addSearcher( new google.search.VideoSearch() );
  ctrl.addSearcher( new google.search.ImageSearch() );
  ctrl.addSearcher( new google.search.BlogSearch() ); 

Jelenítsük meg a SearchControlt a korábban létrehozott div-ben:

  ctrl.draw( document.getElementById( "searchPlaceholder" ) );

Ezzel sikeresen beemeltük a gugli keresőjét a saját oldalunkba, mindössze néhány sor kóddal, amin természetesen lehet finomítani. A legfontosabb, hogy valószínűleg csak a saját webhelyünkön belül szeretnénk keresni, ezért korlátozzuk a keresést. Ezt nem minden searcher objektum támogatja, de a leggyakrabban használt web és az image igen:

  var site = 'www.msdnkk.hu';

  var webSearch = new google.search.WebSearch();
  webSearch.setSiteRestriction(site);
  ctrl.addSearcher(webSearch);

  var imageSearch = new google.search.ImageSearch();
  imageSearch.setSiteRestriction(site);
  ctrl.addSearcher(imageSearch);

A következő, ami engem az alapértelmezett nézetben zavar, hogy kevés találat jelenik meg, kérjünk többet:

  ctrl.setResultSetSize( google.search.Search.LARGE_RESULTSET );

Ez viszont tapasztalatom szerint csak akkor működik, ha beállítjuk, hogy az egyes kategóriák sok találatot jelenítsenek meg:

  var searcherOptions = new google.search.SearcherOptions();
  searcherOptions.setExpandMode( google.search.SearchControl.EXPAND_MODE_OPEN );
  ctrl.addSearcher( webSearch, searcherOptions );

Ez így még elég szerencsétlen, mert nagyon hosszú lesz az oldal, alakítsuk át úgy, hogy a searcherek önálló füleken jelenjenek meg, ekkor nem is kell a SearcherOptions:

  var drawOptions = new google.search.DrawOptions();
  drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
  ctrl.draw(document.getElementById("searchPlaceholder"), drawOptions);

A DrawOptions objektumra egyébként érdemes odafigyelni, lehetővé teszi például, hogy a keresődobozt leszakítsuk a találati listáról. Ehhez mindössze annyit kell tennünk, hogy létrehozunk egy másik div-et és meghívjuk a setSearchFormRoot metódust:

  drawOptions.setSearchFormRoot(document.getElementById("searchFormPlaceholder"));

A SearcherOptions objektum .setRoot metódusával mellesleg azt is meg lehet határozni, hogy az eredmények hol jelenjenek meg.

Sőt, akár megválhatunk a Google logós keresődoboztól, bármely saját input mezőnket felhasználhatjuk. Ha például van egy szövegdobozunk és egy gombunk:

  <input type="text" id="txtSearch" />
  <input type="button" value="Keress!" onclick="ctrl.execute();" />

Akkor DrawOptions segítségével azt is megadhatjuk, hogy ezt használja a kereső:

  drawOptions.setInput(document.getElementById("txtSearch"));

Számítsunk rá, hogy a kereső fel fog iratkozni ennek a szövegdoboznak az onkeyup és onpaste eseményeire, ami azért jó, mert az Enter kezelését is megoldja. A fenti kódból az is látszik, hogy saját kódunkból a keresést az execute metódus meghívásával tudjuk elindítani. Paraméter nélkül hívva az input mező tartalmára keres, de átadhatjuk neki a keresendő sztringet is.

Visszatérve a fülekre és a searcher objektumokra, természetesen megtehetjük azt is, hogy ugyanolyan típusú keresőből (pl. WebSearch) felteszünk kettőt két fülre, eltérő módon paraméterezve. Ebben az esetben célszerű használnunk a setUserDefinedLabel metódust, hogy egyedi nevet tudjunk adni a füleknek:

  var webSearch = new google.search.WebSearch();
  webSearch.setSiteRestriction(site);
  webSearch.setUserDefinedLabel("Ezen a webhelyen");
  ctrl.addSearcher(webSearch);

  var fullWebSearch = new google.search.WebSearch();
  fullWebSearch.setUserDefinedLabel("Teljes weben");
  ctrl.addSearcher(fullWebSearch);

Hasonló módon csinálhatunk külön füleket a magyar nyelvű találatoknak, amihez ún. restrictiont kell beállítani:

  var huWebSearch = new google.search.WebSearch();
  huWebSearch.setRestriction( google.search.Search.RESTRICT_EXTENDED_ARGS, { lr: 'lang_hu' } );
  huWebSearch.setUserDefinedLabel( "Magyar weben" );
  ctrl.addSearcher( huWebSearch );

Restrictionként tudjuk beállítani azt is, hogy ne csak moderált találatok jelenjenek meg, illetve az egyes searcher osztályok további lehetőségeket (pl. színes képek, nagy méretű képek stb.) biztosítanak. Nem biztos, hogy mindent be tudunk állítani az objektum modellen keresztül, lehetnek olyan esetek, amikor a kereső kifejezés kiegészítése a legegyszerűbb megoldás. Erre szolgál a setQueryAddition metódus, amivel például dokumentum típusa szerint kereshetünk:

  var pdfWebSearch = new google.search.WebSearch();
  pdfWebSearch.setUserDefinedLabel("PDF dokumentumok");
  pdfWebSearch.setQueryAddition("filetype:pdf");
  ctrl.addSearcher(pdfWebSearch, searcherOptions);

Természetesen előfordulhat, hogy nincs találat, az ekkor megjelenő üzenetet a SearcherOptions objektum setNoResultString metódusával állíthatjuk be:

  var searcherOptions = new google.search.SearcherOptions();  
  searcherOptions.setNoResultsString( "Gratulálunk, sikerült olyan kifejezést megadnia, amire még a Google sem talál semmit. :(" );
  ctrl.addSearcher(webSearch, searcherOptions);

Ez működik mindenféle searcher objektum esetén, de figyeljünk oda arra, hogy az eredményhalmaz eltérő layoutja és CSS-e miatt előfordulhat, hogy máshogy jelenik meg az üzenet.

Mindez csak a jéghegy csúcsa, de ennyiből talán már látszik, hogy viszonylag egyszerűen, de ugyanakkor rugalmasan konfigurálhatóan hozzá be tudjuk építeni a Google keresőjét a saját webhelyünkre. Ugye nálad is lehet keresni?

A cikkhez tartozó teljes példa kód letölthető.

 

Technorati-címkék: ,,,

One thought on “Legyen kereső az oldaladon

  1. László

    Egy "érdekes" dolog van a Google AJAX Search API-val kapcsolatban, amit érdemes még megemlíteni: a találati lista nem lesz feltétlenül (azaz sok esetben) azonos a google saját publikus találati listájával ugyanazon keresési feltételek mellett. Illetve még annyi, hogy elvileg itt nincsennek korlátozások, de több helyen is lehet olvasni, hogy kitiltásra kerültek. Persze nyilván ez rosszindulató felhasználást feltételez.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s