Jquery - PHP Autocomplete Yapımı
01 Ocak 2021 - 1 dakika okuyabilirsiniz
1085 Görüntülenme
Google 'da 1. Sırada
Google 'da 1. Sırada
Merhabalar bu gün jquery ve php , mysql kullanarak bir autocomplte özelliğini göstereceğim..!
Autocomplete(Otomatik Tamamlama) yapısı kullanıcı ya önceki verileri hızlıca ulaşır yada sizin belirlediğiniz veritabanında kayıtlı verileri kolayca ulaşması sağlanır.
Ben burada veritabanı örneğini göstermek istiyorum.Veriyi çekip bunun kullanıcının daha rahat ulaşmasını sağlayacak bir eklenti yardımıyla yapacağım bu eklenti de JqueryUİ Autocomplte.
Kurulumu
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- jQuery UI -->
<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/jqueryui/1.12.1/jquery-ui.min.js"></script>
Sıra geldi kodlara
PHP Kodları çıktı bu şekilde olduğunu varsayalım öncesinde tabi db bağlantısını vs yapmışsınızdır diye umuyorum :)
arama.php
$response = array();
while($row = mysqli_fetch_array($result) ){
$response[] = array("id"=>$row['id'],"adsoyad"=>$row['adsoyad']);
}
echo json_encode($response);
Json çıktısının şu şekilde gelmesi gerekiyor
[{"id":"1","adsoyad":"Çağan Bah"},{"id":"2","adsoyad":"Ad soyad"}]
Javascript kodları
Html kodlarımız
<div class="ui-widget">
<label for="uyeler">Üyeler: </label>
<input id="uyeler">
</div>
Bir Yorum Bırakabilirsiniz :)