Własna wyszukiwarka z wykorzystaniem Google AJAX Search API

Dodany dnia środa, 16 Czerwiec 2010 przez Alchemy Code

5 komentarze BOOKMARK

Google AJAX Search API pozwala w prosty sposób na wstawienie wyszukiwarki Googla na swoją stronę www. API zostało skonstruowane w taki sposób, by jego użycie było jak najprostsze, a jednocześnie by użytkownik z niego korzystający miał możliwość wyświetlania wyników w dowolny sposób, czy też wykorzystywać zwrócone wyniki wyszukiwania wedle uznania.

W dzisiejszym artykule przyjrzymy się trochę bardziej podstawowym funkcjom tego API i zbudujemy własny skrypt, gotowy do wstawienia na stronę. Wyniki wyszukiwania będą zgrupowane w kategorie tematyczne, ponadto zostanie przedstawiony sposób modyfikacji wyglądu standardowych wyników wyszukiwania.

Nie zapomnij zapisać się na nasz kanał RSS!

Zobacz DEMO

O Google AJAX Search API słów kilka

Google AJAX Search API udostępnia proste obiekty za pomocą których można przeprowadzić wyszukiwanie za pośrednictwem technologii AJAX. API zapewnia dużą swobodę w wykorzystaniu API, począwszy od możliwości przechwycenia wyników wyszukiwania, poprzez możliwość modyfikacji wyglądu po zdefiniowanie obszarów wyszukiwania.

Korzystając z Google AJAX Search API można przeszukiwać zasoby Googla w wielu obszarach:

Web Search
Local Search
Video Search
News Search
Blog Search (póki co eksperymentalnie)
Image Search
Patent Search

Dzięki czemu same wyniki możemy w prosty sposób podzielić na konkretne kategorie.

Pierwsze kroki

Zaczynając pracę z Google AJAX Search API należy w pierwszej kolejności załadować Google AJAX API Loader poprzez:

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

Na dzień dzisiejszy nie jest wymagany klucz do API, jednakże Google zachęca do wygenerowania go i umieszczania jako parametr wywołania API, argumentując, że w przypadku gdyby wykryli jakąś nieprawidłowość w działaniu aplikacji jest to jedyny sposób skontaktowania się z wami. Wybór więc należy do was.

Następnie wybieramy bibliotekę z której chcemy skorzystać:

google.load('search', '1');

W dokumencie przygotowujemy sobie jednocześnie pojemniki w których umieścimy elementy formularza i wyników wyszukiwania.

<div id="pojSearch">
<h2>Wpisz szukaną frazę:</h2>
<div id="pojSearchFrom"> </div>
</div>

Skrypt wyszukiwarki – wykorzystanie API

Mając już załadowane API przystępujemy do napisania funkcji load(), która zostanie wywołana na zdarzenie onLoad:

//wywołanie całego mechanizmu na onLoad
function OnLoad() {
new load();
}

Na początek pobierany pojemnik w którym będzie wstawiony formularz i wyniki wyszukiwania:

//pobranie elementu z DOM do którego zostanie dodany moduł wyszukiwarki
var boxSearch = document.getElementById("pojSearchFrom");

Dalej tworzymy nowy obiekt wyszukiwarki, ustawiamy wielkość wyników i kategorie w ramach których będziemy wyszukiwać wpisaną frazę:

// utworzenie formularza wyszukiwarki
this.mainControl = new google.search.SearchControl();
// ustawienie wielkości pakietu wyników:
//LARGE_RESULTSET=8 wyników, SMALL_RESULTSET=4 wyniki w jednym oknie
this.mainControl.setResultSetSize(GSearch.SMALL_RESULTSET);
// ustawienie obszarów wyszukiwania
// web, obrazy, wideo, newsy, blogi i książki Google
this.mainControl.addSearcher(new google.search.WebSearch());
this.mainControl.addSearcher(new google.search.ImageSearch());
this.mainControl.addSearcher(new google.search.VideoSearch());
this.mainControl.addSearcher(new google.search.NewsSearch());
this.mainControl.addSearcher(new google.search.BlogSearch());
this.mainControl.addSearcher(new google.search.BookSearch());

W następnej kolejności precyzujemy sposób wyświetlania wyników – w tym przypadku będą to taby (do wyboru mamy jeszcze tryb linear). Po dodaniu opcji wyświetlania, „wrysowujemy” za pomocą funkcji draw cały komponent do pobranego wcześniej pojemnika.

//ustawienie sposobu wyświetlania kategorii na TABY
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
this.mainControl.draw(boxSearch, drawOptions);

Jako ciekawostkę możemy jeszcze doprecyzować tekst jaki ma się wyświetlać w przypadku, gdy nie zostaną znalezione żadne wyniki wyszukiwania.

//ustawienie tekstu w przypadku, gdy nie znaleziono żadnych wyników wyszukania
this.mainControl.setNoResultsString("Nie znaleziono wyników spełniających kryteria");

Łącząc wszystko w całość – skrypt wygląda następująco:

//załadowanie Google AJAX Search API z językiem PL
google.load('search', '1');
// funkcja wywoływana na onLoad inicjująca formularz i mechanizm wyszukiwarki
function load() {
//pobranie elementu z DOM do którego zostanie dodany moduł wyszukiwarki
var boxSearch = document.getElementById("pojSearchFrom");
// utworzenie formularza wyszukiwarki
this.mainControl = new google.search.SearchControl();
// ustawienie wielkości pakietu wyników:
//LARGE_RESULTSET=8 wyników, SMALL_RESULTSET=4 wyniki w jednym oknie
this.mainControl.setResultSetSize(GSearch.SMALL_RESULTSET);
// ustawienie obszarów wyszukiwania
// web, obrazy, wideo, newsy, blogi i książki Google
this.mainControl.addSearcher(new google.search.WebSearch());
this.mainControl.addSearcher(new google.search.ImageSearch());
this.mainControl.addSearcher(new google.search.VideoSearch());
this.mainControl.addSearcher(new google.search.NewsSearch());
this.mainControl.addSearcher(new google.search.BlogSearch());
this.mainControl.addSearcher(new google.search.BookSearch());
//ustawienie sposobu wyświetlania kategorii na TABY
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
//ustawienie tekstu w przypadku, gdy nie znaleziono żadnych wyników wyszukania
this.mainControl.setNoResultsString("Nie znaleziono wyników spełniających kryteria");
this.mainControl.draw(boxSearch, drawOptions);
}
//wywołanie całego mechanizmu na onLoad
function OnLoad() {
new load();
}

I to wszystko! W ten oto prosty i szybki sposób zbudowaliśmy swoja własną wyszukiwarkę bazującą na wynikach Googla. Pozostaje nam jedynie ostylowanie elementów wyszukiwarki.

Struktura DOM poszczególnych elementów wygląda następująco:

<!– A collection of web search results in the search control –>
<div class="gsc-results gsc-webResult">
<!– A single web result in the search control –>
<div class="gsc-result gsc-webResult">
<!– A single web result, full structure defined below –>
<div class="gs-result gs-webResult"></div>
</div>
…
</div>
<!– Similar pattern for local, blog, etc. –>
<div class="gsc-results gsc-localResult"></div>
<div class="gsc-results gsc-blogResult"></div>

Zobacz DEMO

Tak oto nasz skrypt ożył. W następnym artykule zmodyfikujemy go tak by można było wprowadzić ograniczenie wyszukiwania do konkretnej strony, a ponadto spróbujemy skorzystać z API z poziomu PHP-a, wykorzystując REST API.

Zapisz się na RSS by dowiadywać się o nowościach w serwisie! Zapisz się na RSS w blog.alchemycode.pl