ASP.NET Jquery Autocomplete (TextBox Otomatik Tamamlama)

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. 

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')

Örnek Proje için tıklayınız

8167

(12) Yorum

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

01/01/2015 00:00Cevapla

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

01/01/2015 00:00Cevapla

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()); }

01/01/2015 00:00Cevapla

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

01/01/2015 00:00Cevapla

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

01/01/2015 00:00Cevapla

Projenin zip hali mevcut mu hocam

01/01/2015 00:00Cevapla

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

01/01/2015 00:00Cevapla

hocam indirme linkini göremedim

01/01/2015 00:00Cevapla

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 :(

01/01/2015 00:00Cevapla

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

01/01/2015 00:00Cevapla

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ı

01/01/2015 00:00Cevapla

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

01/01/2015 00:00Cevapla

Yorumlar