Asp.Net ile jQuery Autocomplete kullanmak

Bilmeyenler için autocomplete nedir onu söyleyeyim, bir textbox’ a kelime girmeye başlıyorsunuz ve o ana kadar girilmiş olan karakterleri veritabanında arayıp alt tarafta açılan listede, ilgili kayıtları kullanıcıya sunan bir sistem. Google buna güzel bir örnek teşkil ediyor. Bu işlem için Ajax Control Toolkit içinde bulunan AutoComplete nesnesiyle de işimizi görebiliyoruz. Fakat ajax control araçlarıyla projemize bir şey eklediğimizde arka planda bir kod ve dosyada beraberinde projemize eklenmiş oluyor, bu durum büyük projelerde problemler çıkartabilir. Hemde zaman zaman tarayıcıdan tarayıcıya antin kuntin problemleride beraberinde getiriyor. Aklıma gelmişken, oldukçada yavaş çalışıyor. Kısacası kullanması basit fakat performansı çok kötü bir yöntem. Uzun zamandır projelerimde jQuery kullanıyorum ve en ufak bir problem dahi yaşamadım. Master sayfama jQuery’ i ekliyorum ve tüm projede istediğim herşeyi rahatlıkla yapabiliyorum. Farklı durumlar içinse bir sürü eklentisi bulunuyor. AutoComplete‘ de bunlardan biri. Eklentinin sayfasına buradan ulaşabilir, demosuna buradan bakabilirsiniz. Anlatacağım örnekte direk veritabanından arama yapacağız. Daha fazla uzatmadan kodlarımıza bakalım. İlk önce gerekli dosyaları indirip, projemize ekliyoruz.

http://jquery.bassistance.de/autocomplete/lib/jquery.js
http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js

http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css

Sonrasında aşşağıdaki gibi kodumuzu yazıyoruz.

Default.aspx sayfamız

	<script type="text/javascript">
    $(document).ready(function() {
        $("input#<%=txtKelime.ClientID %>").autocomplete('Ara.aspx').result(function(event, item) {
            $("#<%=txtGizliAlan.ClientID %>").val(item.toString().split(",")[1]);
        });
	});
	</script>

	<form runat="server" id="form1">
		<asp:textbox id="txtKelime" runat="server" />
		<asp:textbox id="txtGizliAlan" runat="server" style="display:none" />
	</form>

Yukarıdaki kodda txtGizliAlan olarak gördüğümüz alan, seçtiğimiz kaydın id değerinin saklandığı alanımız. Yani ilgili kaydın id sini veritabanına yazacaksak burayı kullanıyoruz.

Ara.aspx sayfamız

protected void page_load(object sender, EventArgs e) {
string strKelime = Request.QueryString["q"];// burada gelen değeri sql enjeksiyondan korunmak için kontrol etmeyi unutmayın !
DataTable dt = veritabani.DataTableGetir("Select * from tabloAdi where aranacakAlan like '%" + strKelime + "%'");
foreach (DataRow dr in dt.Rows)
{
Response.Write(dr["alanAdi"].ToString() + "|" + dr["id"].ToString() + Environment.NewLine);
}
}

İşte bu kadar kolay ! Artık bizimde bir Autocomplete mekanızmamız var.

  • http://uygur.me/ Uygur Kıran

    Abdullah ağbi yine formdasın :) yardır babam yardır

  • http://renkhane.com yirmiuc

    S.A Apdullah.
    Öncelikle anlatım için teşekkürler. Biryerde hata yapıyorum ama çözemedim ekran goruntusu boyle http://i39.tinypic.com/2rvzciu.png

    bakmak istersen kodlarıda atarım. teşekkür ederim.

  • http://renkhane.com yirmiuc

    tamam problemi çözdüm. Ara.aspx sayfasının içeriğini tamamen silmek gerekiyor (ilk satır hariç tabiki)

    • halit

      kardeş bendede aynı sorun oldu tam olarak ara.aspx sayfasının ıcerıqını sılmek derken nedemek ıstıyorsun

  • http://a apoStyLEE

    @yirmiuc, kusura bakma şimdi fırsat bulabildim. Problemi çözdüğüne sevindim :)

  • ferat

    mrblar.. ben çok denedim olmadı bir türlü db bağlanyısı yapamadım bunun vb.net olanı yokmu acaba, yada bağlantı kodlarınıda yazabilirmisiniz

    • apoStyLEE

      Merhaba, problem sadece db bağlantısında mı ? Birde kullandığını db ne ?

  • ferat

    evt şuan o aşamayı geçemediğim için sorun db bağlantısı.. sizin tanımladığınız veritabani.DataTableGetir ile bi türlü ilişkilendiremedim bu benm c# bilmememden kaynaklı. ben vb ile mysql kullanıyorum şuan.. sizden isteğim tam bağlantı kodları olsa yeter yada vb ile yapılmış şekli

  • ferat

    :grin:

  • http://- sumeyye

    Merhaba,
    autocomlate kullanıyorum fakat şöyle bir problem var.textbox update panelin içindeyse ve asenkron postback oluyorsa auto complaate çalışmıyor.sayfayı refresh yapmak gerekiyor. bunun için bir çare varmıdır.nezamndır çare arıyorum acele cevap yazarsanız sevinirim.

    • apoStyLEE

      Merhaba, biraz geç oldu kusuruma bakmayın. Benim nacizane görüğüm eğer jquery kullanıyorsanız ajaxtoolkit den uzak durun bu benzeri sorunlar yaşamanız olasıdır. Daha önce hiç kullanmadığımdan probleminize çözüm üretemiyorum.

  • ferat

    heyooo :) kimse yokmuuuu

    • apoStyLEE

      ferat gözümden kaçmış yorumun kusuruma bakma :) İlgili örneğin vb versiyonu bulunmuyor. Sana tavsiyem vb ile veritabanına bağlanma, verileri listeleme vb.. işlemleri öğrendikten sonra bu örneği kullanman yönündedir. Dediklerimi yaptıktan sonra göreceksin ki hiç de büyütülecek bir durum yokmuş :)

  • ferat

    DataTable dt = veritabani.DataTableGetir…. peki bu kodun öncesinde mutlaka bir vt bağlantısı olması gerek onu yazarsanız ben çözerim:)

  • http://www.emredersin.com Emre

    Vermiş olduğunuz örnek kodlar üzerinden sistemi çok güzel çalıştırdım. Hep yapmak istediğim birşeydi. Ajax Toolkit’in component i webservis üzerinden çalışıyor be yeterince yavaş ve bu kadar kullanışlı bulmamıştım kendisini.

    Sayenizde jquery vasıtasıyla hep yapmak istediğim birşeyi ufak bir implementasyonla gerçekleştirmiş bulunuyorum. MSSQL 2005 + C# ile gayet rahat sorunsuz çalıştırdım..

    Tekrar teşekkür ediyorum.
    Çalışmalarınızda başarılar

    • apoStyLEE

      İlgi alakanıza bende teşekkür ederim. İşinize yaradıysa ne mutlu bana :)

  • http://www.emredersin.com Emre

    Hocam sana birşey danışmak istiyorum, verdiğin kod üzerinden denedim ama beceremedim.

    Farzedelim ki sayfamızda 2 tane textbox var. Birine musteri yazıyoruz, diğerine şube yazıyoruz.

    birinci textbox da sorun yok yazmaya baslarken musteri adını tamamlıyor.

    Ancak ikinci text box a şube yazarken, tüm subeler üzerinden autocomplete yapmaya calısıyor. Query string üzerinden ikinci bir parametre olarak, bi yukarıdaki textbox a yazılan musterinin id sini yada adını gondermeyi başaramadım. Nasıl yapabiliriz sence ?

    $(document).ready(function() {
    $(“input#”).autocomplete(‘AC_Subeler.aspx?id=’ + $(“#”).val() + ‘&’ ).result(function(event, item) {
    $(“#”).val(item.toString().split(“,”)[1]);
    });
    });

    Bu ve buna benzer şeyler denedim ancak boş gelior “id” querystringi.. null değil.. boş : “”

    Fikrin varmı acaba ?

  • apoStyLEE

    Şu şekillerde olması lazım.

    var birinciId;
    $(“input#”).autocomplete(‘AC_Subeler.aspx?id=’ + $(“#”).val() + ‘&’ ).result(function(event, item) {
    $(“#”).val(item.toString().split(“,”)[1]);
    birinciId= item.toString().split(“,”)[1];
    });

    $(“ikinciInput#”).autocomplete(‘AC_Subeler.aspx?parametre=’+birinciId+’id=’ + $(“#”).val() + ‘&’ ).result(function(event, item) {
    $(“#”).val(item.toString().split(“,”)[1]);
    });

    bu olmazsa şöylede yapabilirsiniz.

    $(“input#”).autocomplete(‘AC_Subeler.aspx?id=’ + $(“#”).val() + ‘&’ ).result(function(event, item) {
    $(“#”).val(item.toString().split(“,”)[1]);
    });

    $(“ikinciInput#”).autocomplete(‘AC_Subeler.aspx?parametre=’+$(“#birinciInput”).val()+’id=’ + $(“#”).val() + ‘&’ ).result(function(event, item) {
    $(“#”).val(item.toString().split(“,”)[1]);
    });

    Bu arada, ben bu yazıyı yazdığımda jQueryUi deki autocomplete özelliği yayınlanmamıştı. Yerinizde olsam http://jqueryui.com/demos/autocomplete/ adresine göz atıp bunu kullanırdım.

  • http://Websitesi alper

    Örneğin şehirleri listeledim fakat şehirin adı deil idsi lazım nasıl erişebilirim Mesela adam ankaraa dedi butona basınca ankaranın idsini elde etmem lazım.Teşkrler

    • apoStyLEE

      Yazıda txtGizliAlan adıyla geçen yer bu yüzden var. Seçilen değerin id sini buraya atıyor ve siz buradan değeri alıp işliyorsunuz. Yeri gelmişken jqueryui de autocomplete özelliği bulunuyor. Buraya yazdım diye hatırlıyorum ama yazmamışım, en kısa zamanda bu şekilde autocomplete nasıl yapılıyor bunuda eklerim, çok daha fonksiyonel ve hızlı..

  • http://taylan.somee.com taylan

    örnek güzel eline sağlık ama peki masterpage kullananlar bu textbox’lardaki id değişimi olayını nasıl aşacak.

    yani masterpage kullanıyorsa runa=server tagı alan her bir kontrol otomatik çalışma zamanında ctl00_Main_ prefixini alır.

    yani id’si txtKelime olan textbox masterpage varsa ctl00_Main_txtKelime olarak değişiyor ve jquery null dönüyor.

    • apoStyLEE

      Teşekkürler, doğru diyorsunuz masterPage kullanıldığında direk kodun için kontrolün html de görünen id sini verebilirsiniz. Örneğin; $(“#ctl00_ContentPlaceHolder1_txtKontrolAdi”) gibi..

    • http://www.macrobook.net macrobook

      Sanırım masterpage kullanıldığında TextboxAdi.ID yerine TextboxAdi.ClientID ile değiştirilmiş olan ID’yi doğrudan alabiliyorsun.

  • Pingback: jQueryUi AutoComplete kullanımı | asp.net, jquery ve diğer web teknolojileri üzerine()

  • http://Websitesi Yiğit

    Öncelikle yayınız için çok teşekkürler. Herşeyi çok güzel anlatmışsınız.
    Yalnız benim bir sorum olacak.

    Databaseden gelen sonuçlarım ne olursa olsun mutlaka Untitled Page diye bir şey ekleniyor sonuna.

    Bunu nasıl yok edebilirim?

    • apoStyLEE

      Teşekkür ederim. Allah Allah çok enteresan, eğer değeri geriye .aspx sayfasından döndürüyorsanız .aspx sayfasında ki html kodlarının tamamını silip denermisiniz ?

  • http://Websitesi Yiğit

    Hızlı cevabınız için teşekkürler.

    Sizin yaptığınızın aynısını yaptım. Tek farkı datatable kullanmak yerine şu satırları yazdım:

    Response.Write(“Yigit1” + “|” + “1” + Environment.NewLine);
    Response.Write(“Yigit2” + “|” + “2” + Environment.NewLine);
    Response.Write(“Yigit3” + “|” + “3” + Environment.NewLine);

    Bir de eğer zamanınız varsa autocomplete metodunun options’larını anlatabilir misiniz?

    Tekrar teşekkürler,

    • apoStyLEE

      Çok garip diyecek bir şey bulamıyorum. Geçenlerde jQueryUi Auto complete ile ilgili bir yazı yazmıştım, isterseniz onu inceleyin http://www.apostylee.com/jqueryui-autocomplete-kullanimi/

      • http://Websitesi Yiğit

        Çok teşekkür ederim. Şimdi o yazınızı inceleyeceğim.

        Gerçekten çok yararlı oluyor yazılarınız.

        Sevgiler

        • apoStyLEE

          Ne mutlu bana o zaman :) İlginize teşekkür ediyorum. Sevgiler bizden :)

  • http://www.ajansgece.com Serdar

    makaleniz ve yalın anlatımınız için çok teşekkür ederim daha önce web servis kullanarak yapmıştım ve sistemi çok fazla yoruyordu fakat şu anda çok hızlı çalışan bir sisteme ulaşmış olmak beni büyük bir yükten kurtardı. elinize emeğinize sağlık (” biraz css editiyle çok daha görsel sonuçlar veriyor :) “)

    • apoStyLEE

      Teşekkür ederim :)

  • http://mcicekay.wordpress.com Mustafaa Çiçekay

    su örneği acceess dbye bağlanmış olarak birisi yapıp da bir yere upload etse, enim çok hayır duamı alıcak valla, iyi çalışmalar dilerim herkese

  • http://www.ajansgece.com Serdar

    Merhaba arkadaşlar. Mustafa Çiçekay arkadaşın isteği üzerine apoStyLEE arkadaşımızın çalışmasını sql ve oledb bağlantıları ile hazırlayıp sunucuma yükledim. İstediğiniz gibi kullanabilirsiniz. Bağlantılar için kendi kullancığım CoreDl.cs clasımı proje içine ekledim Sql ile kullanmak isteyen arkadaşlar CoreDl.cs-Sql dosyasının -Sql uzantısını kaldırsınlar bu dosyanın kullanımıda Ara.cs dosyasında mevcut. İşinize yaraması dileğiyle .Download adresi aşağıdadır

    http://www.ajansgece.com/autoCOMPLATE.rar

    (umarım reklam olarak algılanmaz en güvenli yer kendi sunucum olarak düşündüm :) )

    • apoStyLEE

      Elinize sağlık :)

      • http://www.ajansgece.com Serdar

        ne demek benim için büyük bir zevktir :)

  • http://mcicekay.wordpress.com Mustafaa Çiçekay

    Çalışmalarını takdir ediyorum, çok teşekkür ederim, dikkate alıp zamanını ayırdığın için, Allah razı olsun, iyi çalışmalar

  • http://Websitesi Hüseyin Çolak

    PEKİ bu txtgizlialan a gelen value textbox a yazmadan direk response edebilirmiyiz acaba

  • http://Websitesi emin

    güzel örnek ama her seferinde db den sorgulama yapması sıkıntı çıkarırmı diye düşünüyorum. bir generic list içine atsak generic list i de cache oradan arattırma yapsak dicem ama.oradada like gibi bir komut yok diye biliyorum. = gibi fonksiyonlar var.

    acaba yapılabilirmi?

    • apoStyLEE

      Dediğiniz gibide olur contains ile arama yapılabilir fakat bu seferde işin içinde cache olduğu için verinin güncelliği problem çıkartabilir. Aslında generic liste felan gerek yok direk datatable yi cacheleyipde kullanabilirsiniz..

  • http://www.emredersin.com emre

    Windows form uygulamarında senin dediğin gibi yapılır mesela genelde.. AutoCompleteStringCollection diye birşey vardır. Formun loadunda.. mesela tum musteri isimlerini çekersin bu stringcollection a atarsın, daha sonra hep bunun içinden sorgu gerçekleşir. sanırım buna benzer bir çözüm aramaktasın..

  • http://Websitesi emin

    emre bey aynen dediğiniz gibi bir şey arıyorum.fadat web ortamında. apoStyLEE hocam performans nedeniyle datatable ve dataset ile çalışmak yerine kendi veri modellerimle işlem yapmaya çalışıyorum. datatablenin bilmiyorum belki vardır like tarzı bir metodu ama generic listte nasıl olur onu araştırmam lazım. güncellenme mevzusuna gelincede müşteri listem var ve o liste çok güncellenmiyor.fakat müşterilerin bilgileri her an güncellenebilir durumda. benim derdim müşterileri listesi bu şekilde almak. dolayısıyla verinin güncelliğini dert etmiyorum.generic list lerde like tarzı bir fonksiyon bulursam ben yazarım eger sizler raslarsanız siz yazınız.tşkler.

  • http://Websitesi orion

    makale ve örnek için çok teşekkür ederim. Harika bir paylaşım olmuş ellerinize sağlık ancak benim sormak istediğim bir soru var. Büyük ölçekli bir projede database’teki kayıtların binlerce olduğu düşünülecek olursa textbox a girilen değerin ilk harfinden başlaması performans açısından sıkıntı olabilir diye düşünüyorum acaba bunu ilk üç harften sonra başlayan versiyonu nasıl olurdu?

  • http://Websitesi orion

    jquery scripti içerisinden 412nci ve 539ncu satırlardaki minChar değerini istediğiniz değer ile değiştirirseniz yukarıda yazdığım gerçekleşiyor. benim gözüme bunlar çarptı tabii sizin vereceğiniz cevabıda bekliyor olacağım.

    • apoStyLEE

      Merhaba, öncelikle http://www.apostylee.com/jqueryui-autocomplete-kullanimi/ burada ki ui nin autocompletesini tavsiye etmek istediğimi söylemek istiyorum. Hem kontrolü çok kolay hemde daha hızlı çalışıyor. Sizin istediğiniz olayda minLength özelliğiyle kolayca hallediliyor. İlgili örnekte ise inputa girilen değerin uzunluğunu lenght ile alıp eğer 3 den büyükse aramayı başlat yapılabilir ama ben derimki hiç uğraşmayın ;)

  • http://Websitesi Ümit ahmet Şahin

    Ara.aspx yerine bir tane Generic Handler oluşturup ismini Ara.ashx verin daha düzenli olur. Karıştırmamak için

    Fonksiyon kisayol = new Fonksiyon();
    public void ProcessRequest (HttpContext context) {
    string strKelime = context.Request.QueryString[“q”];
    DataTable dt = kisayol.GetDataTable(“Select * from tabloismi where isim like ‘%” + strKelime + “%'”);
    foreach (DataRow dr in dt.Rows)
    {
    context.Response.Write(dr[“isim”].ToString() + “|” + dr[“isim_id”].ToString() + Environment.NewLine);
    }

    }

  • http://. salih yücel

    Autocomplete arama yaparhen ashx kullanıyorum
    misal 2 tane kaydımız var 1 tanesi
    Stok Raporu
    Otomatik Stok Raporu

    st dediğimde her 2 side geliyor çünkü ashx dosyasında like kullandım ama
    sto dediğimde sadece
    Stok raporu geliyor bu neden oluyor acaba
    yada plung de bir değişiklşik mi yapmamız lazım.

  • Pingback: Mvc 3 Jquery Ui – Autocomplete Kullanmak | asp.net, jquery ve diğer web teknolojileri üzerine()

  • http://huseyinsekmenoglu.net Hüseyin Sekmenoğlu

    Konuyla alakası yok ama bu “script highlight” için hangi eklentiyi kullanıyorsun?

  • Burak Net

    Merhaba hocam, çok güzel bir uygulama yapmışsınız, çoklu like kullanıp birden çok alanda nasıl arama yaptırabiliriz acaba yardımcı olabilirmisiniz?

  • http://www.garipadamlar.com Ömer Faruk Özkan

    Hocam iyi güzelde insan biraz anlasılır ders paylasır ya kodlarda acıklama yok sadece paylasıp gecmissin lütfen yapmayın bunu ya.

  • hamza

    Merhaba ben yapamadım bunu cok ugrastım

  • http://yok hamza musuk

    Merhaba bende herhangi bir aksiyon olmuyor yardımcı olur musunuz? js falan koydum veritabanında sorgu falan olmyuro. bir de ben bunları user control içinde yaptım orada mı sıkıntı var HTML tag falan yok ondan mı?

  • Onur Girgel

    Merhaba ;
    Benim sorunum Türkçe Karakter ile başlayan dataları getirmiyor.Sebebi ne olabilir.

  • ismail

    Merhaba arkadaşlar; programlamada yeniyim. Acaba rica etsem ar.aspx.cs dosyasının içeriğinin tümünü paylaşabilir misiniz. Bir türlü yapamadım kodlar sürekli hata veriyor.

    Saygılarımla

  • Sadık Önal

    c# ile masterpage içerisinde ki updatepanel de bir sayfada kullanıldığında çalışmıyor.
    yardımcı olurmusunuz?

  • Mesut

    Geri dönen sonuçlardaki türkçe karakterler soru işareti görünüyor nasıl düzeltebiliriz ?