Jquery - PHP Autocomplete Yapımı

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 :)



güzel ve etkili bir yazı. teşekkürler