Skip to content

Latest commit

 

History

History
136 lines (119 loc) · 4.24 KB

README.md

File metadata and controls

136 lines (119 loc) · 4.24 KB
Raw

PHP - AJAX Livesearch

Php ve Ajax ile Mysql veri tabanında livesearch işlemi.

Ajax, get ve post işlemlerini sayfayı yenilemeden yapabilmenize olanak sağlar. Livesearch olayını da bu sayede mümkün kılar. Arama kutusuna girdiğiniz her karakterde veritabanından fetch edilen verileri value değerine göre filtreler. İnternette uzun süre araştırdım ve yaptığım örneğin çoğundan daha basit ve çok daha anlaşılır olduğunu düşünüyorum.

Bu şekilde bir tablom var.

Verileri, item_name yani ürünün adına göre filtrelemek istediğimizi varsayalım. table

Bu işlem için;

  • İlk olarak veritabanı bağlantısı yapıyoruz.
# db.php  

$host = "localhost";
$dbname = "apos";
$user = "root";
$pass = "";


try{
    $db = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8",$user,$pass);
}catch(PDOException $e){
    echo '<strong>Veritabanı Bağlantısı Başarısız Oldu</strong> : ' . $e->getMessage();
    exit;
}
  • Ardından ilgili tablomuzdaki ilgili sütunun, inputa girdiğimiz value değerine göre filtreliyoruz.
    Burada term, inputa girdiğimiz değeri ifade ediyor. Ardından while ile gelen sonuçları listeliyoruz.
# fetch_items.php  

require_once 'db.php';
try{
    if(isset($_REQUEST["term"])){
        // create prepared statement
        $sql = "SELECT * FROM items WHERE item_name LIKE :term";
        $stmt = $db->prepare($sql);
        $term = $_REQUEST["term"] . '%';
        // bind parameters to statement
        $stmt->bindParam(":term", $term);
        // execute the prepared statement
        $stmt->execute();
        if($stmt->rowCount() > 0){
            while($row = $stmt->fetch()){
                echo '<div class="element" style="margin-top:2px;">' . $row["item_name"] . '</div>';
            }
        } else{
            echo '<div class="element">Eşleşme bulunamadı</div>';
        }
    }  
} catch(PDOException $e){
    die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}

// Close statement
unset($stmt);
 
// Close connection
unset($db);
  • Son adım olarak; 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    • input ve sonuçların gösterileceği div'i ekliyoruz.
    <div class="search-box">
  <input type="text" id="" name="livesearch" placeholder="Ürün Ara.." ><br>
  <div class="result"></div>
</div>
    • Javascript kodlarımızı yazmaya başlayabiliriz. (jquery cdn'in altına olacak şekilde yazılmalıdır)
    $(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* inputa her karakter girildiğinde verileri çek */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("fetch_items.php", {term: inputVal}).done(function(data){
                // Dönen verileri görüntüle
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });

    // Çıkan sonuca tıklandığında value değerini alsın
    $(document).on("click", ".result .element", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
    • İsterseniz stil ekleyebilirsiniz.
    body{
  background-color: #191c24;
  font-family: sans-serif;
}
input,
.element{
    padding: 0.625rem 0.6875rem;
    background-color: #2A3038;
    border: none;
    border-radius: 15px;
    outline: none;
    color: whitesmoke;
}
.search-box{
    width: 99vw;
    height: 30vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.result{
    position: absolute;
    top: 33.5vh;
    left: 44vw;
}

Geçmiş olsun 👻

Sonuç