jqueryUiAutoComplete

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..

  • http://Websitesi Kecoli

    Selam ;
    Makalelerinizi takip ettim jquery ile yaptklarınız çok güzel tebrik ederm.Ama benim bir sorum olacak böyle bir örnek yapmanız paylaşmanız mümkünmüdür.
    Aynı şekilde arama yapacak ama HASHTABLE içerisinde bunu 1 haftadır bulamadım l,ütfen yardımlarınızı esirgemeyiniz

    • apoStyLEE

      Selam, öncelikle şunu belirteyim aynı soruyu birden fazla kez yazmanızın hiç bir anlamı yok, aksine soruyu yanıtlayacak kişinin size cevap vermemesini sağlarsınız. Gelelim sorunuza hashtable içinde aramadan kastınız tam olarak nedir ?

  • Fatih

    Selam Ben aşağıdaki kod da txtgizlialan a atılan targeturl bilgisini respons.redirect yapmak istiyorum ama çözemedim yardımcı olabilirmisini acaba

    $(document).ready(function () {
    $(“#”).autocomplete(‘../AnaMenu/ara.aspx’).result(function (event, item) {
    $(“#”).val(item.toString().split(“,”)[1]);
    (window.location. = $(“#”)
    });

    });

  • http://Websitesi emin

    hocam demoyu indirmeye kalktığımda.yüksek güvenlik tehlikesi diyor diyek ban koyuyor.indiremiyorum. sanırım bir sorun var.

    • apoStyLEE

      Allah Allah, bir problem görünmüyor.

  • http://Websitesi emin

    hocam aynı sorun devam etmekte.buradan kodları aldım hata vermiyor fakat bir sonuçta gösteremedim. tek alamadığım css onuda eklermisiniz. bide onu ekleyeyim sanırım ondan çalışmıyor.

    • apoStyLEE

      Tekrar indirmeyi deneyebilir misiniz ?

  • http://Websitesi emin

    hocam bu kez modem in güvenlik duvarından kurtuldu Microsoft SmartScreen® Filtresine yakalandı. güvenli bir site diye bildirimde bulundum dosyayı indirdim. fakat bir nimlenme var bilginize.bu arada çok tşk ler.

    not inenn dosyayı antivirus ile taradım sıkıntı yok.sanırım o linkteki sayfada bir cod vardı.

  • Pingback: Mvc 3 Jquery Ui – Autocomplete Kullanmak | asp.net, jquery ve diğer web teknolojileri üzerine()

  • http://album.visualportal.net matemrah

    Merhabalar. Hocam emeğinize sağlık. Güzel bir çalışma paylaşmışsınız. Projeyi indirdim fakat şöyle bir sorunum var. Searchbox’dan bir kelime seçiyosunuz ve karşınıza bir popub geliyor. Bunu engellemek istiyorum ama sanırım bunu dll içinde saklamışsınız. Bunun code hali varmı,paylaşabilirmisiniz. İyi çalışmalar.

  • Cihan

    sade anlatımınız için çok teşekkürler, bir sorum var
    eğer getireceğimiz veri ;

    d.Add(“java”, “javascript”);
    d.Add(“aspnet”, “asp.net”);
    d.Add(“cs”, “csharp”);

    şeklinde yani id’ miz de string tipinde olsaydı bu kodu nasıl uygulayabiliriz?
    Cevabınız için şimdiden teşekkürler. kolay gelsin

  • Cihan

    3 ay geçmiş aradan hala aynı sorunla uğraşıyorum, çözebilen varsa yorumlarınızı bekleriz..

  • Cihan

    Çözdüm olayı panpalar yorum yapıp kendinizi yormanıza gerek kalmadı.. Aynı sorunu yaşayan olursa diye yazayım..

    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 d = veriler();
    sb.Append(“[“);
    foreach (KeyValuePair 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 veriler()
    {
    //Dictionary d = new Dictionary();
    //d.Add(“jav”, “javascript”);
    //d.Add(“asp”, “asp.net”);
    //d.Add(“csh”, “csharp”);
    //d.Add(“ph”, “php”);
    //d.Add(“javs”, “java”);
    //d.Add(“jqu”, “jquery”);
    //d.Add(“htm”, “html”);
    //d.Add(“cs”, “css”);
    return d;
    }