Más oldalakba illeszthető kereső

Nemrég kellett csinálnom egy keresőt a programportal.hu oldalnak, amit mások be tudtak illeszteni a saját oldalaikba. Két féle képpen oldottam meg, ehhez fűznék néhány kommentet.

A form

Harci helyzet

A felállás a következő: Kell az oldalon lévő keresőhöz hasonló keresőt készíteni, amit mások saját kódjukba tudnak illeszteni. Nem tűnik nagy “was ist das”-nak, azonban van egy két bökkenő.

Először is a kereső formban legördülő mezőből lehet kiválasztani, hogy melyik kategóriában akarunk keresni. A kategóriák listája bővülhet, ezért mindig a programportal.hu oldalról kell lekérnünk őket, és mivel sima ajax kérést 2 domain között nem végezhetünk, getJSON()-t kell használnunk. Legalábbis így próbálkoztam először.

Másodszor van egy dátum választó naptár, ami jQueryUi segítségével születik meg. Lehet, hogy valakinek újat mondok azzal, hogy a jQueryUi képeit is elérhetjük CDN szerverről, így betölthetőek akkor is ha az adott ftp szerveren nincsenek fent.

Végül pedig az volt a kérés, hogy be lehessen állítani a default várost amiben keres.

Hogyan lesz a csokapik

1.
2.
3.
4.
5.
6.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://programportal.hu/css/outer_search.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">var varos = "Dunaszekcső"</script>
<script type="text/javascript" src="http://programportal.hu/js/search_67.php"></script>
<div id="programportal_search_form"></div>

Ha a fenti kódot beillesztjük valahova, akkor ott megjelenik a kereső form. Lehet nem a legoptimálisabb megoldás, de elsőre ezt találtam ki, lehet tippeket adni mitől lesz hatékonyabb.

jQueryUI és form css

Az első sorban a Google szerverén tárolt jQueryUi css fájlját töltjük be, ami húzza magával a dátumválasztó naptárhoz szükséges képeket is.

Második sorban magának a formnak a formázása lesz lecuppantva a programportal.hu szerveréről.

jsapi

A jsapi a Google serveren lévő javascript kód, aminek a segítségével egy csomó egyéb google serveren lévő kódot tudsz includolni a kódodba. Használata egyszerű, először a 3. sorban lévő kóddal meghívod, majd a javascript részben a következőt teszed:

1.
2.
3.
4.
5.
6.
7.

google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(ha_betoltodott);
 
function ha_betoltodott(){
    alert('67');
}

Ezzel lekértük a jQuery és jQueryUI könyvtárakat, majd ha betöltődtek lefuttatjuk a ha_betoltodott függvényt. a google.load() első paraméterben egy javascript szolgáltatás nevét várja, amit innen tudunk kimazsolázni, második paraméterében pedig az adott könyvtár verziószámát várja, amit ha 1-nek definiálunk, akkor a legfrisebb verziót adja vissza.

Város

4. sorban adhatjuk meg a várost amiben alapértelmezetten keres, ez azért került ide ki, hogy az is módosítani tudja, aki a kódot beilleszti a saját oldalába.

A javascript

Maga a javascript az 5. sorban lévő search_67.php-ben van, itt jön ki a majom a vízből. Először úgy akartam megcsinálni, hogy getJSON() segítségével kapcsolatba lépek a programportal.hu oldalon egy php fájlal, ami lekéri nekem a szükséges adatokat, majd visszaadja és a maradékot legenerálja az itt betöltött javascript.

Aztán leesett, hogy javascript fájlt ilyen módon is be lehet tölteni, hogy php fájl generálja, ez nem tiltott cross domain elérés mint a sima ajax kérések. Innentől kezdve pedig a php fájl ami generálja a javascript kódot, úgyis hozzáfér az adatbázishoz és egyből olyan formot tud generálni ami tartalmazza az aktuális kategóriákat.

Ismerjük meg kicsit közelebbről ezt a search_67.php-t!

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

ob_start ("ob_gzhandler");
header("Content-type: text/javascript; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
 
include_once '../private/config.php';
include_once '../private/function.php';
 
connect();

Az első sorban azt mondjuk meg, hogy tömöríteni szeretnénk a tartalmat gzippel. Utána beállítjuk a dokumentum típusát javascriptre, a cache-t arra, hogy óránként frissítse a fájlt.

Utolsó néhány sorban bekérjük a függvényeket és az adatbázis csatlakozáshoz szükséges makonyságokat, és csatlakozunk.

Ezután megejtjük a szükséges jQuery hívásokat, és ha betöltődött meghívjuk az asd() függvényünket:

1.
2.
3.

google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(asd);

Függvényeinknek és változóinknak mindig beszédes nevet adjunk, hogy később egyszerű legyen újra megérteni és módosítani a kódot. Az asd() nem beszédes név.

Most jön maga a form, ami elég unalmas és egyhangú, ami fontos belőle, hogy lesz benne egy ilyen legördül mező a városok számára:

1.
2.
3.
4.

<select id="programportal_city" name="city" style="width:150px;">
    <option value="1">Aba</option>
    <option value="2">Budapest</option>
</select>

Miután beillesztésre került a form az oldalba, lefuttatunk egy keresést a fenti város select elemei között, és megkeressük a legelején definiált várost:

1.
2.
3.
4.

$("#programportal_city option").each(function(){
    if($(this).text() == varos)
        $(this).attr('selected','selected');
});

Ez ugye fogja a selectet és az each segítségével az összes option elemén végigmegy, majd megnézi, hogy az option text tulajdonsága megegyezik a legelején itt:

1.	<script type="text/javascript">var varos = "Dunaszekcső"</script>

megadott városnévvel. Ha igen, akkor azt az optiont fogja kijelölni.

Naptár

A végén található még egy kód, ha valaki nem tudja hogyan kell jQuery datepickert magyar nyelvűre állítani, akkor annak ez a megváltás:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

/*NAPTÁR*/
$.datepicker.regional['hu'] = {
    closeText: 'bezárás',
    prevText: '&laquo;&nbsp;vissza',
    nextText: 'előre&nbsp;&raquo;',
    currentText: 'ma',
    monthNames: ['Január', 'Február', 'Március', 'Április', 'Május', 'Június',
    'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'],
    monthNamesShort: ['Jan', 'Feb', 'Már', 'Ápr', 'Máj', 'Jún',
    'Júl', 'Aug', 'Szep', 'Okt', 'Nov', 'Dec'],
    dayNames: ['Vasámap', 'Hétfö', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat'],
    dayNamesShort: ['Vas', 'Hét', 'Ked', 'Sze', 'Csü', 'Pén', 'Szo'],
    dayNamesMin: ['V', 'H', 'K', 'Sze', 'Cs', 'P', 'Szo'],
    dateFormat: 'yy-mm-dd', firstDay: 1,
    isRTL: false
};
 
$('#startDate').datepicker($.datepicker.regional['hu']);

Összegzés

Nyilván itt-ott lehet rajta optimalizálni, ezt megírhatjátok kommentbe, vagy ha van sokkal jobb módszeretek rá, azt is szívesen várom. Ha valaki tanult belőle valamit már megérte.

Letöltés