ASP.NET Jquery Autocomplete (TextBox Otomatik Tamamlama)

ASP.NET Jquery Autocomplete (TextBox Otomatik Tamamlama)
26 Ocak 2015ASP.NET

Generic Handler aracılığı ile ASP.NET sayfamızda bulunan bir metin kutusuna autocomplete özelliği ekleyeceğiz. Merhaba , burada bulunan örnekte php ile bir metin kutusuna autocomplete özelliğini göstermiştik.

ilk olarak sayfamıza yüklememiz gereken js ve css dosyalarını indirmek için tıklayın.

Burada bulunan javascript ve css dosyalarımızı aşağıdaki gibi sisteme ekliyoruz. 

	<script type="text/javascript" src="js/jquery-1.4.1.min.js">
	</script><script type='text/javascript' src='js/jquery.autocomplete.js'>
	</script><link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />

Daha sonra generic handlerımızı çağırmak için bir jquery kodu ekliyoruz.

	<script type="text/javascript">
	$(function () {
	$("#<%=TextBox1.ClientID%>").autocomplete('source.ashx');
	});
	</script>

Buradaki TextBox1 diye tanımladığımız istemci bizim autocomplete yapacağımız metin kutusunu temsil ediyor.
Bu kısım tamamlandıktan sonra iş generic handler eklemeye geldi. Bunun için projemize sağ tıklayıp Add -> New Item dedikten sonra Generic Handler seçerek tamam diyoruz. Ben bizim generic handler a source ismini verdim. Vereceğiniz ismi yukarıya eklediğiniz .autocomplete(' '); kısmında da düzeltmeniz gerekmektedir.

Generic Handler ı ekledikten sonra tek yapmamız gereken aşağıdaki kodu kendimize göre değiştirmek . Ben aşağıda yazdığım kod ile deneme_tablo sayfasından adsoyad sütununu çeliyorum.

	SqlConnection baglanti = new SqlConnection("Server=.;Database=gecici;User ID=edr;Password=1");
	public void ProcessRequest(HttpContext context)
	{
	context.Response.ContentType = "text/plain";
	System.Text.StringBuilder sb = new System.Text.StringBuilder();
	SqlDataAdapter verial = new SqlDataAdapter("select adsoyad from adsoyad_tablo",baglanti);
	DataSet ds = new DataSet();
	verial.Fill(ds);
	foreach (DataRow dr in ds.Tables[0].Rows)
	{
	sb.Append(dr[0].ToString()).Append(Environment.NewLine);
	}
	context.Response.Write(sb.ToString());
	}

Bu şekilde autocomplete  olayını asp.net sisteminde çalıştırmış olduk. kodların bir kısmı alıntıdır.

ÖRNEK DOSYA

gecici isimli bir database oluşturup içerisine aşağıdaki tabloyu ekledim. adsoyad_table tablosu ve adsoyad sütunu

USE [gecici]
CREATE TABLE adsoyad_table
(adsoyad nvarchar(50) NOT NULL)

INSERT INTO adsoyad_table (adsoyad) VALUES ('Ender Ariç')
INSERT INTO adsoyad_table (adsoyad) VALUES ('Wesley Sneijder')
INSERT INTO adsoyad_table (adsoyad) VALUES ('Didier Drogba')
INSERT INTO adsoyad_table (adsoyad) VALUES ('Gheorghe Hagi')
INSERT INTO adsoyad_table (adsoyad) VALUES ('Wesley Snipes')
INSERT INTO adsoyad_table (adsoyad) VALUES ('Didier Deschamps')
6851 Görüntülenme sayısı
  1. Yorum Icon
    3/19/2017 10:24:57 PM#1Erdal

    sql like komutunu kullanmak istiyorum fakat olduramadım bir türlü textbox2 deki değeri nasıl alacağım like için

    Yorumu Cevapla
  2. Yorum Icon
    3/15/2017 4:51:16 PM#2ne ararsan ara geliyor

    diyelim ali veli deli kayıtlar gelsin siz textbox a x yazarsanız hepsi listeleniyor. olmamış.

    Yorumu Cevapla
  3. Yorum Icon
    12/9/2016 5:44:12 PM#3sedef akdağ

    hocam sorunu buldum javascrip ler yakışıyor Projemde kullandığım 2 tane javascript'i iptal edince auto complate çalışıyor. Çalışmayı nasıl çözebilirim. Basit bir yöntemi var mı

    Yorumu Cevapla
  4. Yorum Icon
    12/6/2016 5:20:04 PM#4sedef akdağ

    source.ashx içerisine yazdım ilgili kodları fakat listelenmiyor :(

    Yorumu Cevapla
    • Yorum Icon
      12/6/2016 5:25:38 PMEnder Ariç

      Merhaba, akşam bir çalışma yapıp koda ekleyeceğim.

    • Yorum Icon
      12/7/2016 9:57:28 AMsedef akdağ

      hocam indirme linkini göremedim

    • Yorum Icon
      12/9/2016 2:52:18 PMsedef akdağ

      Hocam kaçtır deniyorum bir türlü olmuyor. Aciliyeti var. js ve css leri ekledim yollarınıda çağırdım .source.ashx içerisine ilgili kodlarıda yerleştirdim bir türlü olmuyor :(

    • Yorum Icon
      12/9/2016 3:22:31 PMEnder Ariç

      Merhaba örnek dosyayı yazıya ekledim. Sorunuz olursa sorabilirsiniz. İyi çalışmalar.

  5. Yorum Icon
    12/6/2016 5:03:29 PM#5sedef akdağ

    Aşağıdaki kodları koyacağımız kısım neresi? SqlConnection baglanti = new SqlConnection("Server=.;Database=gecici;User ID=edr;Password=1"); public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; System.Text.StringBuilder sb = new System.Text.StringBuilder(); SqlDataAdapter verial = new SqlDataAdapter("select adsoyad from adsoyad_tablo",baglanti); DataSet ds = new DataSet(); verial.Fill(ds); foreach (DataRow dr in ds.Tables[0].Rows) { sb.Append(dr[0].ToString()).Append(Environment.NewLine); } context.Response.Write(sb.ToString()); }

    Yorumu Cevapla
    • Yorum Icon
      12/6/2016 5:07:57 PMEnder Ariç

      Çağırdığımız Generic Handler (source.ashx) içerisine eklememiz gerekiyor.

    • Yorum Icon
      12/6/2016 5:21:17 PMsedef akdağ

      Projenin zip hali mevcut mu hocam

  6. Yorum Icon
    1/26/2016 6:10:00 AM#6Mert

    çok rahat ve kolay uygulanabilen bir yöntem olmuş. paylaşım için çok teşekkürler.

    Yorumu Cevapla
  7. Yorum Icon
    7/31/2015 4:09:30 AM#7Bilal

    js dosyalarını koymayı unuttuğum için iki - üç saat uğraştım. En son çalıştı elinize sağlık.

    Yorumu Cevapla

BİR YORUM YAZIN

Bilgileriniz Güvende!E-Posta adresiniz ve diğer bilgileriniz kimseyle paylaşılmayacaktır.