Bu makalemizde web uygulamamızda jquery nin autocomplete özelliğini nasıl kullanabileceğimizi inceleyeceğiz. Autocomplete textbox a veri girilmeye başlandığı anda textbox taki değeri server a göndererek veritabanında sorgulatıp gelen sonuçları textbox ın altında açılır liste ile görüntülemeye yarar.

Bununla google dahil bir çok web sitesinde karşılaşmışızdır. Peki neden dropdownlist in içerisine kayıtları ekleyip seçimi oradan sağlamıyoruz da textbox ta autocomplete ye ihtiyaç duyuyoruz ve ne zamanlar bu autocomplete yi kullanmalıyız sorusuna gelirsek. Çok fazla kaydı olan bir tablo içerisinden bir kayıt seçtirmek istersek bu sayfa her yüklendiğinde dropdownlist i yeniden güncellemek yerine autocomplete özelliği ile kullanıcının istediği kayıtlardan 10 ar tane listeleyerek uygun olan kaydı seçmesini sağlayabiliriz. 

Bu konuyla ilgili örneğimizi veritabanımızdan şehirleri çekerek gerçekleştirelim. Şehirler tablosu genelde en temel şekliyle şehir id ve şehir adı kolonlarından oluşmaktadır. Burada veritabanı ile ilgili tablo, stored procedure ve kütüphane yapısını oluşturduğunuzu düşünerek örneğime sayfamızın header kısmına jquery kütüphanelerini eklemekle başlayalım. 

<link href="http://localhost/Ornek/Style/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://localhost/Ornek/Javascript/jquery.min.js"></script>
<script src="http://localhost/Ornek/Javascript/jquery-ui.min.js"></script>

Bu kütüphaneleri ekledikten sonra body bölümüne istenilen şehir ile ilgili arama yapılabilmesi için text tipinde bir input ekleyelim. Bir de seçilen şehrin id sini yazabileceğimiz tipi hidden olan bir input ekleyelim. 

<input id="txtSehir" type="text"/>
<input id="txtSehirId" type="hidden"/>

Bu işlemleri de gerçekleştirdikten sonra web uygulamamıza web service ekleyelim. Bu örneğimizde eklediğim web service e OrnekSync adını verdim. Sayfamızla web servisimizin iletişim kurabilmesi için script manager ile web servisimizi tanımlayalım. 

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="http://localhost/ornek/OrnekSync.asmx" />
        </Services>        
    </asp:ScriptManager>

Şimdi ise txtSehir text ine autocomplete özelliği atayalım. Autocomplete özelliğiini

$(function() {

    $("#txtSehirAdi").autocomplete({
        source: function(request, response) {
               //Burada textbox ta bir tuşa basıldığında çalışmasını istediğiniz kodunuzu ekleyebilirsiniz.
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                // Hata oluştuğu takdirde bu olay çalıştırılacaktır.
                }
            });
        },
        select: function(event, ui) {
         //Bu fonksiyonda ise listede seçim yapıldıktan sonra çalışmasını istediğinz kodları ekleyebilirsinz.
        },
        minLength: 2  // textbox ta 2 karakter girildikten sonra bu özellik çalıştırılsın. 
    });
 })

Yukarıda kısa bir şekilde nasıl olacağını belirttk. Şimdi ise ajax kullanarak client tarafında server dan şehir listesini isteyecek kodumuzu source kısmına yazalım. İlgili şehir seçildikten sonra da bu şehrin plaka kodunu da txtSehir Id ye yazalım.

$(function() {

    $("#txtSehirAdi").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "http://localhost/ornek/OrnekSync.asmx/GetSehirByName",
                data: "{'_SehirAdi':'" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            Id: item.Id,
                            value: item.Adi
                        }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        select: function(event, ui) {
            $("#txtSehirId").val(ui.item.Id);
        },
        minLength: 2
    });
 })

Burada OrnekSync.asmx Web Servisindeki GetSehirByName fonksiyonuna _SehirAdi değişkenine textbox ta girilen değerleri gönderiyoruz. Geri cevap döndüğünde success olayının içerisinde id ve value kısmına dönen değeri atıyoruz. Select kısmında ise seçilen kaydın Id sini txtSehirId ye yazıyoruz. 

Web servisimizin kodu da aşağıdaki gibi yazabiliriz.

[WebMethod]
public List<OrnekLib.CommonLayer.Sehirler> GetSehirByName(string _SehirAdi) 
{
    return new OrnekLib.DatabaseLayer.Sehirler().GetList(_SehirAdi);
}

Javascript ile Web servisi kullanırken sürekli rem ini kaldırmayı unuttuğum [System.Web.Script.Services.ScriptService] kısmını siz açmayı unutmayın. 

Son olarak stored procedure mizi de inceleyecek olursak. 

create proc [dbo].[sp_GetSehirList]
	@fldSehirAdi	nvarchar(50)
as
begin
	SELECT	top (10)
			fldSehirId,
			fldSehirAdi
	FROM	tblSehirler
	where	fldSehirAdi Like(@fldSehirAdi + '%')
end