mehmetduran.com - Paylaşmak Güzeldir...
Jquery ve Ajax ile AutoComplete Alan Yapımı
Bu yazımda Jquery ve Ajax ile AutoComplete örneğimden ve nasıl yaptığımdan bahsedeceğim. Birçok ajax uygulamalarında gördüğümüz temel uygulamalardan birisi. Ben de Jquery ve Ajax ile yaptığım örneklere bu örneği de katarak örneklerimi artırıyorum. Bu uygulamayı yapmak için de daha önce de olduğu gibi User Control'den faydalandım. Ayrıca bu uygulamayı yapmak için ajax işlemlerini gerçekleştirecek olan server taraflı kodları Web Service ile hazırladım. Böylece daha önce yazmış olduğum yazıları da örneklendirmeye devam ediyorum. Şimdi bu uygulamayı nasıl yaptığımıza ve kodlarımıza bakalım.

Öncelikle uygulamamızın script kodlarına bakalım:

<script type="text/javascript">
  $(document).ready(function(){
   $("#arama").keyup(function(){
    data_getir($(this).val());
   });
  });
  function data_getir(aranan)
  {
    $.ajax({
      type: "POST",
      url: "web.asmx/oku?aranan=" + aranan, //web service ve methodumuz
      data: "{adres:'complete.ascx'}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg){
        $("#goster").html(msg.d)
      }
    });
  }
  function sec(kontrol){$("#arama").val($(kontrol).html()); $("#goster").html("");}
</script>

Daha sonra ise uygulamamızın html yapısına bakalım:

  <div>
    <input id="arama" type="text" />
    <div id="goster"></div>
  </div>

Görüldüğü gibi uygulamamızın temel kısımları böyle. Server taraflı kodlamalar için örnek projeyi indirip kodları inceleyebilirsiniz. Bu kodlarda bizlere sonuçları getirecek olan User Control'ü okuma ve okuma sonucu elde ettiğimiz değeri dönderen methodlarımız var. Daha önce yaptığım uygulamaların aynısı olduğu için bu kodları burada yazmıyorum.

Uygulamamızda ise kullanıcı TextBox'a her değer girdiğinde ajax fonksiyonumuz tetiklenecek ve sonuç varsa bu sonuçları getirecektir. Bizde mouse ile sonuçlardan istediğimizi seçerek TextBox'ın değerini tamamlayabiliyoruz. Uygulamanın eksik tarafı ise gelen sonuçlar arasında dolaşmanın olmayışı. Sadece mouse ile gelen sonuçlardan birini seçebiliyoruz. Bu eksiği de önümüzdeki dönemde gidermeye çalışacağım.

Örnek projeyi buradan indirebilir, buradan da online olarak görebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 05 Ocak Pazartesi 2009 22 34444 3,2
Ajax Javascript Asp.net Veritabanı jQuery Jquery User Control Web Service JSON
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Yorumlar ve Yorum Ekleme Bölümü Güncellendi 411 Length Required Hatası ve Çözümü FaceBox Uygulaması Jquery ve Ajax ile Hazırladığım Takvim Jquery, Ajax ve FaceBox ile Edit Update Uygulaması
Yorumlar
Yorum Yaz
RSS Yorum Takibi
ihsan bulut 06 Ocak Salı 2009 00:05 #1
çok yararlı bir çalışma gerçekten. hertürlü projede kullanılabilir. bu ajax harbiden baya işe yarıyomuş :) birde şu arşiv olayına el atalım üstad. mantığını bi kavrayalım. yazını bekliyoruz :)
Mehmet Duran 06 Ocak Salı 2009 09:21 #2
En kısa zamanda hazırlamaya çalışacağım.
Sener 11 Mart Çarşamba 2009 16:23 #3
örnek çalışmıyor..
Mehmet Duran 11 Mart Çarşamba 2009 22:35 #4
Örnek çalışıyor ve online örnekte mevcut. Uygulamayı tamamen kendim yaptım ama klasik uygulamalrdan bayağı bir eksiği var. En başta tuş fonksiyonları eksik. Ancak onları da ayrı bir yazımda anlatmıştım. Bu uygulamaya entegre edemedim.
Ersin 01 Temmuz Çarşamba 2009 02:13 #5
Merhaba; Bu örnek, hem VS2008`de hemn de Web`te Web.Config`de authentication satırında hata veriyor. Bu satırı kaldırınca çalışıyor ve sayfada isimler çıkıyor. Ancak AutoComplete çalışmıyor. Diğer Ajax örneklerinizin çoğunu çalıştırdım. Bunu bir türlü çözemedim. Teşekkürler.
Mehmet Duran 01 Temmuz Çarşamba 2009 12:07 #6
Uygulamayı indirip denedim ve bir sorun gözükmüyor. Ayrıca çalışan linki de var ve orda da bir sorun yok. Eğer authentication satırı sorun veriyorsa muhtemelen izinlerden dolayı çalışmıyor. Ajax işlemi için Web Service kullanmıştım onun yerine işlemi yapacağın sayfada tanımlayacağın Webmethodu kullanmayı deneyebilirsin. Ayrıca bu uygulama tam olrak diğer örnekleri giib değil. Yazımda da belirttim. Tuş kontrolü yok. Sadece textboxa girilen değer ile eşleşen jayıtlar textbox altında sıralanıyor ve bunlardan birinin mouse click eventı ile seçebiliyoruz. Şimdilik bu şekilde bir uygulama.
Cem 01 Ağustos Cumartesi 2009 16:28 #7
Örnek çok güzel. Tuşların aktif olmasını bekleriz artık yada onuda biz yapalım :) .. Benim sorum textbox da bi arama yaptığımızda önceki arananlar çıkıyo cookilerde kayıtlı olanlar yani. Üst üste biniyi yazılar o zamanda. Textbox'a girilenlerin cookilere kayıt etmemesini nasıl sağlarız ?
Mehmet Duran 01 Ağustos Cumartesi 2009 23:49 #8
Tuş kontrolü için sadece basılan tuşları kontrol etmek buna göre hareket etmek gerekiyor. Bu konuda bir yazı yazmıştım ancak uygulamaya entegre edememiştim. Söylediğin konu ise textboxların autocomplete özelliğinin açık olması. Eğer bu özelliğine false değeri verirsen daha önce arananlar çıkmaz. Eğer doğru anladıysam cevap bu olmalı.
cem 02 Ağustos Pazar 2009 22:11 #9
Doğru anladınız evet de textbox'ın autocomplate özelliği nasıl kapatılır?
Mehmet Duran 02 Ağustos Pazar 2009 23:26 #10
Bunun için textbox'a autocomplete=off gibi bir özellik vermek gerekiyor.
cem 03 Ağustos Pazartesi 2009 10:52 #11
teşekkür ederim sorun kalktı ortadan.
mustafa 30 Ağustos Pazar 2009 00:46 #12
çalışma çok güzel olmuş fakat birde bu çalışmanın php ile yapılmış olanını ekliyebilir misiniz? birde burada ki kişiler tablosundakiler ilk harfleri örneşin çağlar,ömer ö,ç,ş karekterlerinde sorun oluyor mu?
Mehmet Duran 30 Ağustos Pazar 2009 02:13 #13
Karakter sorununu siz söyleyince farkettim. Sorunun nedeni aranan kelimeyi data olarak değil de ajax isteği yapılan url adresinde querystring olarak göndermem. Bu şekilde kullanınca url yapısı Türkçe karakter desteği vermediği için sorun oluyor. Ancak aranan kelimeyi data olarak göndermek bu sorunu engelleyecektir. Php bilgim çok olmasa da var ancak bu uygulamayı php ile yapacak zamanım yok. Ancak mantığı anlamış ve php bilginiz varsa rahatlıkla yapabileceğinizi düşünüyorum.
mustafa 30 Ağustos Pazar 2009 12:54 #14
ilgilendiğin için teşekkür ederim, aranan kelimeyi data olrak nasıl yolluyabilirim o kısmı anlatır mısın ?
mustafa 30 Ağustos Pazar 2009 15:46 #15
function data_getir(aranan) { $.ajax({ type: "POST", url: "web.asmx/oku?aranan=" + aranan, //web service ve methodumuz data: "{adres:'complete.ascx'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg){ $("#goster").html(msg.d) } }); } buradaki kodlarda data: "{adres:'complete.ascx'}" bu satırı açıklar mısınız?
Mehmet Duran 30 Ağustos Pazar 2009 21:10 #16
Burada dediğin data olaylarını anlamak için web service içinde yazmış olduğumuz webmethoda bakman daha iyi olur. Aranan kelimeyi data olarak göndermek için data satırına parantez içine virgülden sonra parametre adını ve değerini vermen gerekir. Ayrıca web serviste bulunan wemethodu da buna göre uyarlaman gerekir. Ayrıca diğer Ajax örneklerime bakarsan birden fazla parametre içeren örnekleri görebilirsin.
adıMehmet 07 Ekim Çarşamba 2009 17:13 #17
Yazınız için tebrikler. Web Servisi tercih etmenizin özel bir sebebi var mı ?
Mehmet Duran 08 Ekim Perşembe 2009 00:03 #18
Merhaba. Web service kullanmamın özel bir tercihi yok. O dönemde ağırlıklı olarak web service kullanıyordum ve ayrıca bu uygulama için web service daha mantıklı gibi geldi. Bu yüzden web service tercih ettim.
akın 05 Aralık Pazar 2010 01:51 #19
Gerçekten güzel bir çalışma :) tşkler
mrblackman 26 Ocak Çarşamba 2011 22:30 #20
Teşekkürler, faydalı ve açıklayıcı bir yazı olmuş.
Deniz 20 Mart Pazar 2011 18:33 #21
Merhaba öncelikle paylaşım için teşekkürler.Uzun süre uğraşsamda bu soruna bir çözüm bulamadım.Ben ajax post ile arama yaptırıyorum sayfamda ve autocomplete alanınıda kullanıyorum.Ancak arama yaptırıldığında o arada autocomplete alanı sayfada yüklenmemiş ise post edilen sayfada top:0 left:0 olarak çıkıyor ve üzerine tıklamadan gitmiyor.Eğer post ettirilmeden önce sayfada autocomplete alanı gözüktüyse post ettirildikten sonra kayboluyor.Bu sorunu nasıl çözebilirim.Teşekkürler
Mehmet Duran 08 Nisan Cuma 2011 22:51 #22
@Deniz, bunun için script kodlarda elementlere uyguladığın görünürlük/görünmezlik özelliklerini verdiğin kısımları incelemekte fayda var.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Ne edersen kendine, edersin kendi kendine.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009