Textbox içinde arama (Twitter Style)

Twitter da tweet yazarken @ işaretiyle başlayıp yazmaya başladığımızda, arkadaşlarımızı bulmamıza olanak sağlayan bir arama mekanızması bulunuyor. Geçenlerde lazım oldu epey bir aradım fakat tam olarak bu işi yapan bir betiğe rastlayamadım, bende isteğime en yakın örneği bulup üzerinde bir kaç ufak değişiklikle amacıma ulaştım. Faydalandığım örneğin adresini bir türlü bulamadım, bu yüzden paylaşamıyorum :S Olayın temelinde jQueryUi – Autocomplete‘ nin Multiple Values özelliği bulunuyor.

Bu işi yaparken jQuery ve jQueryUi yi kullanıyoruz, diğer dinamik kısım için php, asp, java vb.. diller kolaylıkla kullanılabilir. Ben asp.net mvc (c#) ile bu örneği gerçekleştirdim. Mekanızma şöyle çalışıyor; adres satırından aranacak bilgiyi gönderip, veritabanında aramamızı gerçekleştirip sonucu geriye json olarak döndürüyoruz.

Javascript kodlarımız (textAreaAutoComplete.js);

$(function () {
    function split(val) {
        return val.split(/ \s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }

    $("#search")
		.bind("keydown", function (event) {
		    if (event.keyCode === $.ui.keyCode.TAB &&
					$(this).data("autocomplete").menu.active) {
		        event.preventDefault();
		    }
		})
		.autocomplete({
		    minLength: 0,
		    selectFirst: true,
		    source: function (request, response) {
		        if (extractLast(request.term).substr(0, 1) == "@") {
		            $.getJSON(root + "kullanici/search/", {
		                term: extractLast(request.term)
		            }, response);
		        }
		    },
		    focus: function () {
		        return false;
		    },
		    select: function (event, ui) {
		        var terms = split(this.value);
		        terms.pop();
		        terms.push(ui.item.value.split(' ')[0]);
		        terms.push("");
		        this.value = terms.join(" ");
		        return false;
		    }
		});
});

Veritabanında arama işlemini yapan action methodumuz.

        public ActionResult search()
        {
            string strParameter = Request.QueryString["term"].Replace("@", string.Empty).Replace("%40",string.Empty);

            var result = db.kullanicis.Where(x => x.takmaAd.Contains(strParameter));

            if (result.Count() == 0)
            {
                return null;
            }
            else
            {
                return Json(result.Select(x => "@"+x.takmaAd +" "+x.adSoyad), JsonRequestBehavior.AllowGet);
            }
        }

Çalışan örneğe buradan ulaşabilir, buradan indirebilirsiniz.