PHP ve MySQL ile jQuery Autocomplete Kullanımı

Otomatik Tamamlama metin kutusu(Autocomplete textbox) , kullanıcının önceden doldurulmuş değerler listesinden bir değeri hızlıca bulmasını ve seçmesini sağlar. Kullanıcı alana yazarken önerileri otomatik olarak doldurur. JQuery UI Autocomplete eklentisini kullanarak web sitesine otomatik tamamlama metin kutusunu kolayca ekleyebilirsiniz. JQuery UI Otomatik Tamamlama eklentisi, giriş alanını Otomatik Tamamlama’ya dönüştürür. Kullanıcı otomatik tamamlama giriş alanına yazdığında, bu eklenti eşleşen değerleri aramaya başlar ve aralarından seçim yapmasını sağlar.

Autocomplete textbox, web uygulamasında bir arama girişi alanı uygulamak için kullanıcı dostu bir yol sağlar. Kullanıcı giriş alanına yazmaya başladığında veritabanından önerileri doldurmak istediğinizde çok kullanışlıdır. Bu derste, Otomatik Tamamlama metin kutusunu nasıl uygulayacağınızı ve jQuery, PHP ve MySQL kullanarak veritabanındaki önerileri nasıl göstereceğinizi göstereceğiz.

Örnek kod, programlama dilleri araması için otomatik öneri giriş alanları uygular. Otomatik değerlendirme dilleri veritabanından alınacak ve kullanıcı metin kutusuna yazmaya başladığında metin kutusunun altında listelenecektir.

İçindekiler

Veritabanı Tablosu Oluşturma

Otomatik öneriler verilerini depolamak için veritabanında bir tablo oluşturulması gerekir. Aşağıdaki SQL, MySQL veritabanındaki bazı temel alanlara sahip bir diller tablosu oluşturur ve bir kaç tane veri ekler.


CREATE TABLE `diller` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `dil` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `seviye` enum('az','orta','iyi','çok iyi') COLLATE utf8_unicode_ci NOT NULL DEFAULT 'az',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

insert into diller values(null,'C#','çok iyi');
insert into diller values(null,'PHP','çok iyi');
insert into diller values(null,'Python','az');
insert into diller values(null,'JavaScript','çok iyi');
insert into diller values(null,'Java','orta');
insert into diller values(null,'C++','az');
insert into diller values(null,'C','az');

CREATE TABLE `diller` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`dil` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`seviye` enum('az','orta','iyi','çok iyi') COLLATE utf8_unicode_ci NOT NULL DEFAULT 'az',

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

insert into diller values(null,'C#','çok iyi');

insert into diller values(null,'PHP','çok iyi');

insert into diller values(null,'Python','az');

insert into diller values(null,'JavaScript','çok iyi');

insert into diller values(null,'Java','orta');

insert into diller values(null,'C++','az');

insert into diller values(null,'C','az');

Autocomplete Arama Giriş Alanı

JavaScript Kod:
Autocomplete eklentisini kullanmak için jQuery ve jQuery UI kütüphanesini içeren HTML bloğunu oluşturun.


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tasarım Kodlama</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Tasarım Kodlama</title>

</head>

<body>

</body>

</html>

autocomplete() işlevi, autocomplete eklentisini başlatır. Otomatik tamamlama özelliğini etkinleştirmek istediğiniz giriş alanında eleman kimliğinin belirtilmesi gerekir. Ayrıca, otomatik öneriler verilerini almak için yerel veya uzak kaynağı belirtmeniz gerekir.


<script>
$(function() {
    $("#dil_ara").autocomplete({
        source: "arama.php",
    });
});
</script>

$(function() {

$("#dil_ara").autocomplete({

source: "arama.php",

});

</script>

HTML Kodu:
Başlangıçta, dilleri girilmiştir. Öneriler için bir giriş metin alanı sağlanır. Diller veritabanından alınır ve metin kutusuna yazmaya başlarken giriş alanının altında doldurulur. Seçilen değer, forma gönderme işlemi için giriş metni alanına ayarlanacaktır.


<div class="auto-widget">
    <p>Dil Seçin: <input type="text" id="dil_ara"/></p>
</div>

<p>Dil Seçin: <input type="text" id="dil_ara"/></p>

</div>

PHP ve MySQL ile Otomatik Tamamlama Verileri (arama.php)

arama.php dosyası, Autocomplete eklentisinin autocomplete() yöntemiyle çağrılır. Bu dosya, arama terimini temel alan beceri verilerini alır ve PHP ve MySQL kullanarak JSON kodlu bir dizi olarak veri döndürür.

autocomplete() yöntemi, URL’yi kaynaklamak için bir GET isteği yapar ve terim alanı olan bir sorgu dizesi ekler. Böylece, arama terimini PHP GET yöntemini kullanarak alabilirsiniz. Aşağıdaki PHP kodu, kayıtları MySQL veritabanından alın ve kayıtları $_GET [‘term’] ile filtreleyin. Filtrelenen dil verileri, JSON kodlu bir dizi olarak autocomplete() yöntemine geri döndürecektir.


<?php

// Veritabanı ayarlama
$dbHost     = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName     = 'ornekVeritabani';

// Veritabanına bağlan
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// GET isteğinden terimi al
$arananTerim = $_GET['term'];

// eşleşen kayıtları seç
$query = $db->query("SELECT * FROM diller WHERE dil LIKE '%".$arananTerim."%' ORDER BY dil ASC");

// Diller listesini oluştur
$dilData = array();
if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){
        $data['id'] = $row['id'];
        $data['value'] = $row['dil'];
        array_push($dilData, $data);
    }
}

// JSON verisine çevir
echo json_encode($dilData);

<?php

// Veritabanı ayarlama

$dbHost = 'localhost';

$dbUsername = 'root';

$dbPassword = '';

$dbName = 'ornekVeritabani';

// Veritabanına bağlan

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// GET isteğinden terimi al

$arananTerim = $_GET['term'];

// eşleşen kayıtları seç

$query = $db->query("SELECT * FROM diller WHERE dil LIKE '%".$arananTerim."%' ORDER BY dil ASC");

// Diller listesini oluştur

$dilData = array();

if($query->num_rows > 0){

while($row = $query->fetch_assoc()){

$data['id'] = $row['id'];

$data['value'] = $row['dil'];

array_push($dilData, $data);

}

// JSON verisine çevir

echo json_encode($dilData);

Giriş Değerini ID ile Değiştir

Herşey güzel fakat bu veriyi bir tabloya kaydetmek istersek isim değeri yerine ID değeri veritabanı için önemli olacaktır. Bu nedenle çekilen veriyi seçtiğimizde verinin ID değerini alıp <input> içine kaydedelim.


<script>
$(function() {
    $("#dil_ara").autocomplete({
        source: "arama.php",
        select: function( event, ui ) {
            event.preventDefault();
            $("#dil_ara").val(ui.item.id);
        }
    });
});
</script>

$(function() {

$("#dil_ara").autocomplete({

source: "arama.php",

select: function( event, ui ) {

event.preventDefault();

$("#dil_ara").val(ui.item.id);

}

});

</script>

EtiketlerjQuery Autocomplete Kullanımı Textbox Otomatik Veri Çekme

PHP ve MySQL ile jQuery Autocomplete Kullanımı

Veritabanı Tablosu Oluşturma

Autocomplete Arama Giriş Alanı

Giriş Değerini ID ile Değiştir

Yorum Yap

İptal Et

Veritabanı Tablosu Oluşturma

Autocomplete Arama Giriş Alanı

Giriş Değerini ID ile Değiştir

Bunları da beğenebilirsiniz

Yorum Yap