ASP ve Jquery ile otomatik tamamlama (auto complete) sistemi

Bu scriptin farklı bir versiyonunu burada görebilirsiniz.

Bugün, otomatik tamamlama (auto complete) olarak geçen bu sistemin ASP versiyonu için R10 forumda bir istek gördüm ve bu sayfadaki PHP ile yapılmış versiyonu ASP ile yapmaya karar verdim. Sadece sorgulama yapılan sayfayı asp için uyarladım. Geri kalan tüm kodlar orijinal siteye aittir.

Ayrıca veritabanı olarak Hakan Şen’in yapmış olduğu İller ve İlçeler Veritabanı’nın MS Access versiyonunu kullandım.

Script içinde kullanılan kodlar aslında oldukça basit..

Javascript

function lookup(inputString) {
	if(inputString.length == 0) {
		// herhangi bir değer girilmemişse sonuç kutuyu gösterme
		$('#suggestions').hide();
	} else {
		$.post("sorgu.asp", {queryString: ""+inputString+""}, function(data){
			//sorgu.asp sayfasından dönen sonuç sıfırdan büyükse sonuç kutusunu göster
			if(data.length >0) {
				$('#suggestions').show();
				$('#autoSuggestionsList').html(data);
			}
		});
	}
} 
 
function fill(thisValue) {
	$('#inputString').val(thisValue);
	setTimeout("$('#suggestions').hide();", 200);
}

İlk fonksiyon sorgu.asp sayfasını kullanarak veritabanından uyan kayıtları çekmeye ve kullanıcıya göstermeye yarıyor.
İkinci fonksiyon ise sonuç kutusundan seçilen değerin inputa aktarılmasını ve sonra kutunun gizlenmesini sağlıyor.

ASP (sorgu.asp)

'Veritabanı bağlantımızı oluşturuyoruz
Set conn = Server.CreateObject("ADODB.Connection")
dsn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("iller.mdb")
conn.open dsn
 
'Formdan gelen veriyi alıyoruz
aranan = Request.Form("queryString")
'Recordset açılıyor
Set RS=Server.CreateObject("ADODB.Recordset")
'Gelen veriyi veritabanında sorgulayacak sql cümlesini yazıyoruz
Sql = "Select * From ilceler Where ilce Like '" & aranan & "%' Order By ilce"
RS.Open Sql, conn, 1, 3
 
If RS.RecordCount > 0 Then 'Veritabanından dönen kayıt sayısı sıfırdan büyükse
	i = 1
	'Toplam 10 kayıt listeliyoruz
	Do While Not RS.EOF And i < 11
		Response.Write ("<li onClick=""fill('"&RS("ilce")&"');"">"&RS("ilce")&"</li>")
		i = i + 1
		RS.MoveNext
	Loop
End If
RS.Close
conn.Close

Uygulamanın çalışan versiyonunu görmek için buraya,
Uygulamayı indirmek için buraya tıklayınız. Umarım işinize yarar.

34 Yorum

  1. Sende benim gibi ASP yazıp wordpress kullanıyorsun 🙂 Bu ne yaman çelişkidir diye hayıflanıyorum kendi kendime. Oturup basit bi blog yazmak lazım aslında 🙂
    Neyse örnek çok güzel ellerine sağlık kesinlikle kullanıcam 😉

  2. etuner

    teşekkürler.
    çok işime yarıcak sık kullanılanlarıma ekledim…

  3. Alper

    WordPress bir çok konuda rakipsiz bir yazılım. Kullanması da oldukça kolay olduğu için tercih ettim. Ama ASP ile blog sistemi çalışmalarım var.. Biterse mutlaka paylaşacağım.

  4. Arkadaşım buna benzer bir örnek hazırlamak istiyordum sen benden hızlı cıktın eline sağlık

  5. Çok teşekkürler dostum arşivime ekledim ve kullanacağım hemen

  6. quelike

    bunu şeklinde yaptım ancak eklemiyor. select kutuya eklemek için ne yapmamız gerek.
    teşekürler.

  7. quelike

    yukarıda kod çıkmamış buydu : select multiple id = ” inputString ” onblur = ” fill(); “

  8. quelike

    aynen öyle bunu paylaşabilirmisiniz.şimdiden çok teşekürler

  9. teşekürler

    son bir sorum daha olucak.
    şöyleki şimdi arama yapıldıgında çıkan sonuçlara tıkladığında select kutusuna ekleniyor ancak.

    buraya ilçenin adı

    yani value kısmına ilçenin idsi gelmeli diğerine ilçenin ismi gelmeli

    şeklinde gelebilirmi. ve her eklenen selected olması gerek yani seçili olarak eklenmesi gerek.

  10. Alper

    @quelike
    ID değerinin eklendiği örneği buradan indirebilirsin.

    Bu örnekte eklenenler seçili hale geliyor fakat son eklenen değil tümü seçiliyor. Örneğe bakınca söylemek istediğimi göreceksin.

  11. teşekürler oldu ama eklendiğinde tümü seçili olmuyor.veya ben anlatamadım sanırım. şimdi aramalarda çıkan sonuca tıkladıgında select içine ekleniyorya onların hepsinin seçili olarak eklenmesini istemiştim… bunun haricinde çok sağolasın ilgin için.

  12. hocam selected için ne yapmam gerekiyor çok araştırdım ancak bu js koduna uyarlayamadım.
    senide yoruyorum ama ajaxda önemli katkıların oldu öğrenmem için.

    bunun çözümünüde verebilirsen çok sevinirim.

  13. burak

    kolay gelsin arkadaşlar yararlı birşey olmuş fakat benim bir sorum olucak. şimdi bunu localde açtım fakat bu sistemin altında birşey varsa onu aşagıya itiyor ozamanda olmuyor bunu sanki üstte katman olarak duruyormuş gibi yapabilirmiyiz ? sorum biraz acil de

  14. Alper

    @burak
    index.asp dosyasında 32’nci satırdaki css kodunda position: relative yazan bölümü position: absolute olarak değiştirdiğinde istediğin şekilde olacaktır.

  15. mücahit çatalkaya

    elinize sağlık gerçekten güzel olmuş.

    “cı” yazdığım zaman “bağcılar” ı getirecek fonksyon nasıl kullanılabilir? yardımların için teşekkürler.

  16. Alper

    @mücahit çatalkaya

    sorgu.asp dosyasında 17’nci satırda bulunan sql sorgusunu aşağıdaki şekilde yaparsan istediğin şekilde olacaktır.

    Sql = "Select * From ilceler Where ilce Like '%" & aranan & "%' Order By ilce"

    Not: Bu noktada Türkçe karakterler problem oluyor. Bu yüzden büyük harflerle yazmak gerekiyor. Tabii bu sadece ı harfi için geçerli bir çözüm.. Vakit bulduğumda diğer Türkçe karakterler için bir çözüm bulmaya çalışacağım.

  17. Merhaba;

    oncelikle cok ba$arili ve yararli bir cali$ma olmu$, bu sebeple tebrik ederim sizi. Hemen sitemde kullandim ancak kucuk bir sorunla kar$ila$tim. Yani esasen sorun belki sizin icin sorun ancak benim icin buyuk bir sorun:)

    http://www.bilgisozluk.com adresinde incele butonunun yanindaki text areaya herhangi bir kac harf yazarsaniz veritabanindan onla alakali $eyleri cekiyor bunda hicbir sorun yok zira siteye gore uyarladim. Ancak sorun $ekilde. Bir sonuc gosterse dahi a$agida cikan liste butonlari yukari dogru itiyor, bu sebeple de sonuc kismini <2 den olarak ayarladim ve taktir edersiniz ki bu cok i$levli olmuyor. Eger bana bu listenin $effaf yahut ayni renkte ama butonlari yukariya dogru itmeyecek bir yolu gosterebilirseniz cok cok sevinirim.

    Cali$malarinizda ba$arilar dilerim.

    not: http://alperdereli.somee.com/autocomplete/index2.asp
    $eklinde bir link vermi$siniz yukarida ancak ne yazik ki o link acilmamakta, bilginize.

  18. Alper

    Merhaba,

    Sitenize Internet Explorer, Firefox ve Chrome kullanarak baktım. Bahsettiğiniz listeyi Firefox ve Chrome aynı yerde gösterirken, Internet Explorer farklı yerde gösteriyor.. Sanırım sizin yapmak istediğiniz bu listeyi textbox altına alıp yukarı doğru değil de aşağı doğru açmak.

    Sonuçların olduğu bölüm textbox’ın altına alınabiliyor fakat sitede frame kullanıldığı için sonuçlar sozluk isimli frame’in altında kalıyor.. Bununla ilgili birkaç deneme yaptım fakat herhangi bir çözüm bulamadım.. Tek çözüm frame yapısından vazgeçmek gibi gözüküyor.

    Ayrıca uyarınız için teşekkür ederim. Daha önceki bir yorumda verdiğim link için gerekli düzeltmeyi yaptım.

  19. Cengiz

    Merhaba örnek için teşekkürler, çok işime yaradı ama “ö, ç, ğ” gibi harflerde kayıt olduğu halde bulmuyo, bu sorunu nasıl çözebiliriz.

  20. Merhaba,
    Yazınız gayet başarılı. Teşekkürler.
    Benim sormak istediğim, google.com.tr’de öneriler aşağı-yukarı yön tuşları ile seçilebiliyor. Yani mouse ile önerilerden birine tıklatmak gerekmiyor. Böyle bi örnek vermeniz mümkünse ve paylaşırsanız sevinirim.
    Kolay gelsin.

  21. Merhabalar;

    Siteme bunu ekledim ancak. Kodlarda şöyle bir değişiklik yaptım;

    .suggestionsBox {
    position: absolute;
    left: 463px;
    top: 290px;

    Çünkü tam textboxun altında açılmıyordu. Bende böyle yaparak textboxun altında açılmasını sağladım. Ancak ekran çözünürlüğünü 1280 x 800 den 1024 x 768 e çektiğimde yine yeri bozulduç Bunun otomatik olarak kutunun altında açılmasını nasıl sağlayabiliriz.
    Yardımcı olabilirsini çok mutlu oalcağım.
    Saygılar…

  22. Gökhan

    Merhaba;

    Elinize sağlık sistem gayet başarılı. ben kendime uyarladım ama çok önemli bir sorunu var! O da aşağı yukarı tuşlarının çalışmaması. Aşağıdaki kodla kullanıcının hangi tuşa bastığını ekran yazdırıyorum ama listede seçim yapamıyorum. Yardımcı olabilirseniz çok sevinirim.

    $(document).keydown(function(event){
    var keys = new Array(38, 40);
    var code = (event.which) ? event.which : event.keyCode;
    if(code == keys[0]){ alert(‘ust’);}
    if(code == keys[1]){ alert(‘alt’);}
    });

  23. Merhaba;

    Çalışmanız ufak bir sorun dışında gayet başarılı. Bu aşağı yukarı tuşlarınıda entegre edebilirseniz çok iyi olacak. jquery.hotkeys diye bir dosya var ama entegre edemedim. Sizde bakabilirseniz harika olur…

    Kolay gelsin..

  24. Mehmet Emre

    Merhabalar.. Ellerinize sağlık hocam. Türkçe karakter problemini çözebilirseniz mükemmel olur.

  25. Gökhan

    türkçe karakter problemi meta taglarını utf-8 yapınca düzeliyor.

  26. engin kaya

    Merhaba arkadaslar,
    klavye tuslari ile ilgili problemi cozebildiniz mi? birkac gundur klavye problemi ile ugrasiyorum ama henuz bir sonuca ulasamadim.

  27. Kodlarınız harika hele indirilmesi dahada güzel emeğiniz için teşekkürler…

  28. Ayça

    Merhaba,

    Türkçe karakter olunca arama input box a değer atamıyor, ve karakterlerin görüntülenmesinde sorun var. utf-8 meta tagınde sorunu çözmüyor. çözüm geliştirdiyseniz paylaşırsanız sevinirim.

  29. Alper

    Buradaki örneği denerseniz problem çıkmayacağını düşünüyorum.

  30. 10 kayıtdan fazla gösterme yapmıyor ben mesela 18 kayıt göstermek istiyorum sorgu sayfasında sınırlandırmayı 18 yapıyorum ama yine 10 kayıt geliyo

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

This site uses Akismet to reduce spam. Learn how your comment data is processed.