PHP & MySQL - Ajax Live Search


Pretraga baze podataka uz pomoć Ajax-sa

Možete stvoriti jednostavnu funkcionalnost pretraživanja baze podataka uživo (live) pomoću Ajax-a i PHP-a, gdje će se rezultati pretraživanja prikazivati kad započnete tipkati neki znak u polje za unos pretraživanja. U ovo lekciji stvorićemo okvir za pretraživanje uživo (live) koji će pretraživati tabelu zemalja i prikazivati rezultate asinhrono. Ali, prije svega moramo stvoriti ovu tabelu.


Korak 1: Stvaranje tabele baze podataka

Izvršite sljedeći SQL upit za kreiranje tabele zemalja u vašoj MySQL bazi podataka.

CREATE TABLE countries (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL
);

Nakon kreiranja tabele, trebate je popuniti nekim podacima koristeći SQL INSERT izraz. Tabelu unaprijed popunjenih zemalja možete preuzeti i klikom na dugme za preuzimanje i uvesti je u svoju MySQL bazu podataka. DOWNLOAD. Pogledajte lekciju SQL CREATE TABLE izjavi za detaljne informacije o sintaksi za kreiranje tabele u MySQL sistemu baze podataka.


Korak 2: Stvaranje obrasca za pretragu

Sada, kreirajmo jednostavan web interfejs koji omogućava korisniku da uživo (live) pretražuje imena zemalja dostupnih u tabeli naših zemalja, baš kao i samodovršavanje kada korisnik pretražuje zemlju u bazi podataka. Stvorite PHP datoteku pod nazivom "search-form.php" i u nju stavite sljedeći kod.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL pretraga baze</title>
<style type="text/css">
    body{
        font-family: Arail, sans-serif;
    }
    /* Formatiranje okvira za pretraživanje */
    .search-box{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .search-box input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Oblikovanje stavki rezultata */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Dobijanje ulazne vrijednosti pri promjeni */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                // Prikazvanje vraćanje podatka u pretraživaču
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    
    // Postavljanje ulazne vrijednosti pretraživanja na klik stavke rezultata
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>
</head>
<body>
    <div class="search-box">
        <input type="text" autocomplete="off" placeholder="Traži zemlju..." />
        <div class="result"></div>
    </div>
</body>
</html>

Svaki put kad se sadržaj unosa za pretragu promijeni ili se dogodi događaj tipkovnice na unosu za pretragu, jQuery kod šalje Ajax-ov zahtjev u datoteku "backend-search.php" koja preuzima zapise iz tabele zemalja povezanih za traženi pojam. Te zapise će jQuery ubaciti u <div> i prikazati ih u pretraživaču.


Korak 3: Obrada upita za pretraživanje u backendu (pozadini)

Evo izvornog koda naše datoteke "backend-search.php" koja pretražuje bazu podataka na osnovu niza upita poslanih od Ajax zahtjeva i šalje rezultate nazad pretraživaču.


Izjava SQL SELECT koristi se u kombinaciji s operatorom LIKE za pronalaženje odgovarajućih zapisa u tabeli baze podataka zemalja. Implementovali smo pripremljenu izjavu za bolje performanse pretraživanja, kao i za sprečavanje napada uz pomoć SQL - Injection.





Klikni na sliku kako bi preuzeo kompletan kod