jQueryUi AutoComplete kullanımı

Uzun zaman önce jQuery eklentisi olan Autocomplete ile birlikte nasıl bu işi yaptığımızı yazmıştım. Bu sefer jQueryUi ye eklenen bu özelliğin nasıl kullanıldığını anlatmaya çalışacağım. Jqueryui ile birlikte gelen autocomplete de bir çok özellik bulunuyor. Tüm özellikleri kolayca kullanabiliyor ve istediğiniz gibi şekillendire biliyorsunuz. Ben bu örnekte temel olarak arama işlemini anlatacağım, eklentinin sayfasından diğer özelliklerine bakıp kendinize göre geliştirmeler yapabilirsiniz. Hemen default.aspx sayfamızdan başlayalım;

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="ui-Themes/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
    <script>
        $(function() {
            $("#deger").autocomplete({
                source: "Search.ashx",
                minLength: 1,
                select: function(event, ui) {
                    alert(ui.item.id +" / "+ ui.item.value);
                }
            });
        });
	</script>

        <div class="demo">
            <div class="ui-widget">
	            <label for="deger">Bir değer girin: </label>
	            <input id="deger" size="50" />
            </div>
        </div>

Yukarıda ki kodda anlatılacak çok fazla bir şey bulunmuyor. Jquery kütüphanelerimizi yüklüyoruz, sonrasında değer girilecek input umuzun id sini yakalayıp autocomplete özelliğini ekliyoruz. Source ye dinamik olarak aramanın yapılacağı sayfamızın adresini veriyoruz. minLenght değeri ise kaç karakterden sonra aramaya başlanması gerektiğini ifade ediyor. 3 yazarsak 3. karakterle birlikte arama işlemi başlayacaktı. Select kısmında ise veri seçildiğinde ne olacağını fonksiyon olarak tanımlıyoruz. Bu örnekte gelen verinin değerini ve id sini alert ile ekrana basıyoruz.

Search.ashx (arama işleminin gerçekleştiği sayfamız.)

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            string strJsonTemplate = "\"id\":{0},\"value\":\"{1}\"";
            string strParam = context.Request.QueryString["term"];

            StringBuilder sb = new StringBuilder();
            Dictionary<int, string> d = veriler();
            sb.Append("[");
            foreach (KeyValuePair<int, string> item in d.Where(v => v.Value.Contains(strParam)))
            {
                sb.Append("{" + string.Format(strJsonTemplate, item.Key, item.Value) + "},");
            }
            sb.Append("]");

            context.Response.Write(sb.ToString().Replace(",]", "]")); //sonda kalan virgülü kaldırıyoruz.
        }

        public Dictionary<int,string> veriler()
        {
            Dictionary<int, string> d = new Dictionary<int, string>();
            d.Add(1, "javascript");
            d.Add(2, "asp.net");
            d.Add(3, "csharp");
            d.Add(4, "php");
            d.Add(5, "java");
            d.Add(6, "jquery");
            d.Add(7, "html");
            d.Add(8, "css");
            d.Add(9, "mssql");
            d.Add(10, "mysql");
            d.Add(11, "visual studio");
            d.Add(12, "net beans");
            return d;
        }

Bur örnekte Dictionary içerisine elle eklediğim veriler içerisinde arama işlemi yaptım. Siz bu kısmı istediğiniz gibi düzenleyip veritabanınızda arama işlemini kolayca yaptırabilirsiniz. Bu sayfada ekstradan yaptığımız tek olay veriyi jSon veri türüne çevirmek. Arama işlemini QueryString ile birlikte gelen term bilgisini kullanıyoruz. Sonrasında basit bir foreach ve bilgileri ekrana yazdırıyoruz.

Basit bir jSon verisi;

[{"id":1,"value":"javascript"},{"id":5,"value":"java"}]

Gördüğünüz gibi çok basit ve kullanışlı bir şekilde otomatik tamamlama işlemini yaptık. İlgili projeyi buradan indirebilirsiniz. Hepinize güzel ve sağlıklı günler, hoşça kalın..