jQuery-JSON-PHP és input mezők

Néha előfordul a webfejlesztő életébe az hogy az űrlap egy apró változására egy vagon adatot kéne produkálni. Ezzel semmi gond nincs, de jó volna ha az oldalt nem kéne újratölteni.

Ekkor jön jól a jQuery és a getJSON funkciója, amivel asszinkron kérést indíthatunk, majd a kapott JSON formátumban lévő eredményt feldolgozhatjuk vele. A feldolgozás során lehetőségünk van az adatok HTML INPUT mezőkben történő betöltésére.

A program bár rendkívül egyszerű mégis hasznos funkciók alapját mutatja be. A mintaprogramot megtekintheted működés közben és letöltheted a cikk mellékleteként.

Mit is tanulhatunk a példaprogramból:

Több Input mező feltöltése anélkül, hogy újra kéne tölteni az oldalt
Szerver oldalon meghatározni adott input elemeket értékét
jQuery getJSON utasítás használatát
Billentyűzet felengedésre esemény indítást
PHP, Tömöbök, <a href="http://www.json.org" title="JSON">JSON</a> kapcsolatát

A HTML kód:

        <form id="urlap" action="submit.php" method="post">
            <dl>
                <dt>Ez a keresett szöveg (írj be egy nevet):</dt>
                <dd>
                    <input type="text" class="keresett-karakterek" name="kereso_string" value="" /><input id="nevkereses" type="button" value="&rarr;" name="ok">
                    <!-- ide kerülnek a ul/li listaelemek az ajax kérésből !-->
                    <div id="tippek" style="display:none;"></div>
                </dd>
 
                <!-- ez a rész addig rejtve marad, amig nincs a válaszban éték adva nekik !-->
                <dl id="eredmeny" style="display:none;">
                    <dt>Ezt fogjuk feltölteni (ID):</dt>
                    <dd><input type="text" class="feltoltes" id="id" name="id" value="" readonly="readonly"/></dd>
                    <dt>Ezt fogjuk feltölteni (Név):</dt>
                    <dd><input type="text" class="feltoltes" id="nev" name="nev" value="" readonly="readonly"/></dd>
                    <dt>Ezt fogjuk feltölteni (Cím):</dt>
                    <dd><input type="text" class="feltoltes" id="cim" name="cim" value="" readonly="readonly" /></dd>
                    <dt>Ezt fogjuk feltölteni (Telefon):</dt>
                    <dd><input type="text" class="feltoltes" id="telefon" name="telefon" value="" readonly="readonly" /></dd>
                    <dt>&nbsp;</dt>
                    <dd><input id="elkuldes" type="submit" value="Elküldés" name="post"></dd>
                </dl>
 
            </dl>
        </form>

Amire a HTML-ben érdemes odafigyelni:

class="keresett-karakterek"
Nincs szerepe az adott elemen a stílus meghatározásban. Ez csak a kijelölés megkönnyítésére tettem rá.

id="tippek"
Ide kerülnek a gépeléskor indított keresés választható eredményei

id="eredmeny"
Ez a rész csak akkor jelenik meg, mikor feltöltésre került adattal. Itt vannak azok az Input mezők amiket szeretnénk feltölteni. Fontos, hogy az adott HTML input ID-je, mert az értékét ez alapján kapja a JSON válaszból.

Stílus, CSS fájl tartalma:

Nincs igazán jelentősége a példaprogramban, igazából csak arra kell, hogy valahogy kinézzen a dolog.

/*.keresett-karakterek{background:#FFFCDF;}*/
dl {}
dt {font-weight:bold;}
dd {margin:0px 50px;padding:0px 50px;}
 
#eredmeny {border:1px solid #ccc;background:#f7f7f7;padding:10px;margin:20px 0px;}
#tippek {font-size:12px;border:1px solid #ccc;background:#f7f7f7;padding:10px;margin:0px 0px 50px 0px;width:250px;}
#tippek ul {list-style-type:none;padding:0;margin:0;}
#tippek li {cursor:pointer;border-bottom:1px solid #f2f2f2;padding:2px 0px;}
#tippek li:hover {background:#ccc;cursor:pointer;font-weight:bold;}

JQuery kódok, billentyűzet felengedés és autocomplete funkció

<script type="text/javascript">
<!--
$(document).ready(function() {
 
    //első indulás
    $("#tippek,#eredmeny").hide();
    $(".keresett-karakterek").focus();
 
 
    //Billentyű felengedés volt a kereső mezőben
    $(".keresett-karakterek").keyup(function(){
        var keresetSzoveg = $(".keresett-karakterek").val();
        if(keresetSzoveg.length<2){
            return false;
        }
        var urlLoad = "./kiegeszites.php?q="+keresetSzoveg;
        
        //<div id="tippek"-be betöltjük a lista elemeket
        $("#tippek").load(urlLoad);
        $("#eredmeny").hide();
        $("#tippek").show();
     
    });
 
 
 
    //autocomplete -> kattintás a felkínált eredményen
    $("#tippek li").live("click",function(){
        
        //kattintás volt a lista elemen
        //kiszedjük a Li elem szöveges részét
        var bruceLiiText = $(this).text();
        //a szöveges Li részt bemásoljuk a keresőbe
        $(".keresett-karakterek").val(bruceLiiText);
 
        //felesleges mezők elrejtése
        $("#tippek,#eredmeny").hide();
 
        //kiválasztás után eseményt adunk az input mezőnek
        //így elindulhat a getJSON kérés
        $("#nevkereses").click();
    })
 
    
});
//-->
</script>

A működésről röviden

Billentyűzet felengedés (keyup) hatására, ha string sorozat elég hosszú, elindul egy kérés a kiegeszites.php fajl felé, és a válaszban feltéve hogy volt találat az adott keresésére visszaad egy HTML ul li listát.
A lista elemre (li) történő kattintáskor a szöveges tartalmát átmásolom a kereső input mezőben és megindulhat a mezők feltöltése.

A lista generáló PHP kód:

A teszt_adatok.php egy tömb ami neveket tartalmaz (ez egy jQuery plugin-ból tesztfájlból való). Ez a fájl készíti el a választható találati listát.

<?php
error_reporting(0);
 
//teszt adatok tömb
require_once './teszt_adatok.php';
 
//ebben van a keresett kifejelzés
$q=strtolower(strip_tags($_GET["q"]));
//die(var_dump($_GET));
 
//ebben mennek vissza az adatok
$return = false;
$i=0;
$maxElem=10;
foreach ($datas as $key=>$value) {
    if($i>$maxElem){continue;}
    if (strpos(strtolower($key), $q) !== false) {
        $return[]=$key;
        $i++;
    }
}
 
if(!$return){
    $return[]="Nincs találat";
}
 
$ret="<ul>";
foreach($return as $value){
    $ret.="<li>{$value}</li>";
}
$ret.="<ul>";
die($ret);

jQuery getJSON kérés elindítása, eredmény feldolgozása:

A programnak ez a lelke. Ő indítja a kérést, ő fogadja a választ és írja ki a hibaüzenetet, ha kell.

<script type="text/javascript">
<!--
$(document).ready(function() {
 
    //a nevkereses gomb click eseményének feldolgozása
    $("#nevkereses").click(function(){
 
        //keresett string bekérése, és ellenőrzése
        var keresetSzoveg=$(".keresett-karakterek").val();
        
        //szöveg üres?
        if(keresetSzoveg==""){
            alert("írjál be valamit");
            return false;
        }
 
        //szöveg hossz teszt
        if(keresetSzoveg.length<2){
            alert("A beírt szöveg rövid!");
            return false;
        }
 
        //felesleges mezők elrejtése
        $("#tippek,#eredmeny").hide();
 
        //php fájl címe
        var url="./json.php";
 
        //(url,param,feldolgozó_függvény(visszakapott adatok))
        $.getJSON(url, {q:keresetSzoveg}, function(data){                        
            $.each(data, function(i,item){
                if(i=="err"){
                    //ha hiba kulcs van akkor nem sikerült
                    alert(item);
                    return false;
                }                                                       
                //fetöltjük az [i] kulcs id-val rendelkező
                //input mezőket
                $("#"+i).attr("value",item);                           
            });
        });
        //eredmény div-et megjelenítjük
        $("#eredmeny").show();
        return false;
    });
 
    
});
//-->
</script>

A kereső mező mellet lévő gombra kattintva vagy a találati listára történő kattintáskor indul az eseménykezelés. Ha minden rendben és a kereső szó is megfelelő hosszal rendelkezik akkor egy kérést indít a json.php fájlnak és JSON formátumú választ vár.

A JSON válasz kulcs mindig az adott feltölteni kívánt INPUT mező ID-je

PHP oldalon a válaszban határozzuk meg, hogy melyik ID azonosítóval rendelkező Input mező melyik értéket kapja. A $return tömb feltöltése a kereső mező értékére a teszt_adatok.php-ból keresi ki az adott elemet amire illeszkedik.

//a tömb feltöltése input id="kulcs" és értéknek megfelelően
//ez egy lényeges rész hogy a kulcs=<input id=neve
$return =array(
        "id" => rand(0,1000),
        "nev" => $key,
        "cim" => "Lorem Ipsum u. ".rand(0,100),
        "telefon" => md5($key),
);
 
die(json_encode($return));