Ajax ile Autocomplete Textbox Yapımı



Merhaba arkadaşlar,

Bugün JQuery nin ön yüz kütüphanesi Jquery UI ile autocomplete(otomatik tamamlayıcı) bir textbox yapacağız.

Neden böyle bir şeye ihtiyacınız olsun?

Mesela web sitenizde bir üyelik formunuz var ve kullanıcıdan şehir bilgisini istiyorsunuz. Kullanıcının bir kaç harf girmesini sağlayarak doğru şehri seçmesini sağlamak güzel bir şey olsa gerek.


Şimdi önce Jquery ve  Jquery UI kütüphanesini ekleyelim.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>


Şimdi Ajax ile şehir listesinin array(dizisini) dönen bir URL çağıralım:


  $( function() {

    $( "#sehir" ).autocomplete({
      source: URL,
      minLength: 2,
      select: function( event, ui ) {
        alert("Selected: " + ui.item.value);
      }
    });
  } );

URL den dönen sonuç şöyle olmalıdır.


data = [

{"id":"26","label":"Eskişehir","value":"Eskişehir"},
{"id":"34","label":"İstanbul","value":"İstanbul"},
{"id":"35","label":"İzmir","value":"Northern Pintail"},
...
]


HTML:


<div class="ui-widget">

  <label for="sehir">Şehir: </label>
  <input id="sehir">
</div>


Herkese Keyifli Günler

Google Plus'da Paylaş

Unknown Hakkında

Bilgisayar Mühendisi, Hobi olarak JS ile ilgileniyor. Eskişehirli bir kardeşiniz.
    Blogger Yorumları
    Facebook Yorumları

0 yorum :

Yorum Gönder