Etiket: otomatik tamamlama

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.