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.





Abdullah ağbi yine formdasın :) yardır babam yardır
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.
tamam problemi çözdüm. Ara.aspx sayfasının içeriğini tamamen silmek gerekiyor (ilk satır hariç tabiki)
@yirmiuc, kusura bakma şimdi fırsat bulabildim. Problemi çözdüğüne sevindim :)
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
Merhaba, problem sadece db bağlantısında mı ? Birde kullandığını db ne ?
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
:grin:
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.
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.
heyooo :) kimse yokmuuuu
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ş :)
DataTable dt = veritabani.DataTableGetir…. peki bu kodun öncesinde mutlaka bir vt bağlantısı olması gerek onu yazarsanız ben çözerim:)
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
İlgi alakanıza bende teşekkür ederim. İşinize yaradıysa ne mutlu bana :)
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 ?
Ş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.
Ö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
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ı..
ö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.
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..
Sanırım masterpage kullanıldığında TextboxAdi.ID yerine TextboxAdi.ClientID ile değiştirilmiş olan ID’yi doğrudan alabiliyorsun.
Ö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?
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 ?
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,
Ç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/
Çok teşekkür ederim. Şimdi o yazınızı inceleyeceğim.
Gerçekten çok yararlı oluyor yazılarınız.
Sevgiler
Ne mutlu bana o zaman :) İlginize teşekkür ediyorum. Sevgiler bizden :)
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 :) “)
Teşekkür ederim :)
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
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 :) )
Elinize sağlık :)
ne demek benim için büyük bir zevktir :)
Ç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
PEKİ bu txtgizlialan a gelen value textbox a yazmadan direk response edebilirmiyiz acaba
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?
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..
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..
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.
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?
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.
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 ;)
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);
}
}
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.
Konuyla alakası yok ama bu “script highlight” için hangi eklentiyi kullanıyorsun?
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?