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.
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 😉
teşekkürler.
çok işime yarıcak sık kullanılanlarıma ekledim…
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.
Arkadaşım buna benzer bir örnek hazırlamak istiyordum sen benden hızlı cıktın eline sağlık
Çok teşekkürler dostum arşivime ekledim ve kullanacağım hemen
bunu şeklinde yaptım ancak eklemiyor. select kutuya eklemek için ne yapmamız gerek.
teşekürler.
yukarıda kod çıkmamış buydu : select multiple id = ” inputString ” onblur = ” fill(); “
@quelike
yapmak istediğin bu sayfadaki gibi birşey mi?
http://web-tasarim.net/alperdereli/autocomplete/index2.asp
aynen öyle bunu paylaşabilirmisiniz.şimdiden çok teşekürler
index2.asp dosyasını buradan indirebilirsiniz.
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.
@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.
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.
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.
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
@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.
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.
@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.
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.
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.
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.
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.
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…
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’);}
});
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..
Merhabalar.. Ellerinize sağlık hocam. Türkçe karakter problemini çözebilirseniz mükemmel olur.
türkçe karakter problemi meta taglarını utf-8 yapınca düzeliyor.
Merhaba arkadaslar,
klavye tuslari ile ilgili problemi cozebildiniz mi? birkac gundur klavye problemi ile ugrasiyorum ama henuz bir sonuca ulasamadim.
Pingback: ASP ve Jquery ile otomatik tamamlama (auto complete) sistemi - 2 | alperdereli.com
Kodlarınız harika hele indirilmesi dahada güzel emeğiniz için teşekkürler…
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.
Buradaki örneği denerseniz problem çıkmayacağını düşünüyorum.
Pingback: AJAX'la otomatik tamamlama ve/veya listeleme
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