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
0 yorum :
Yorum Gönder