JQuery kütüphanesinin sunduğu güzel bir özelikte autocoplete özelliğidir. Yani bir html input text içerisine yazmaya başladığımızda bize bazı öneriler sunan bir özelliktir. Arama motorlarında sıklıkla gördüğümüz öneri listeleri, bize fikir verebilir.
Bu işlemi gerçekleştirmek için öncelikle, JQuery tarafından kullanılacak olan action metodun hazırlanması gerekmektedir.
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Search(string term)
{
var data = names.Where(m => m.Contains(term))
.Select(m => new { label = m });
return Json(data, JsonRequestBehavior.AllowGet);
}
private List<string> names = new List<string>
{
"adana",
"antalya",
"ankara",
"trabzon",
"tokat",
"istanbul",
"izmir",
"içel",
};
}
Bizim kullanacağımız metod Search action metodudur. Yani text kutusuna bir giriş yaptığımızda, JQuery otomatikmen Search() metoduna gelerek, girdiğimiz yazıyı names listesinden arayarak bize sonuçları getirecektir. Canlı uygulamalar için buradaki gibi bir listeyi kullanmak yerine, veritabanına erişerek gerçek verileri alabiliriz.
Şimdi de Index view sayfasına giderek bir text kutusu oluşturarak devam edelim.
<h2>Test Page</h2>
<script type="text/javascript">
$(function () {
$(":input[data-autocomplete]").each(function () {
$(this).autocomplete({
source: $(this).attr("data-autocomplete")
})
});
});
</script>
<div>
<label>Arama</label>
<input type="text" data-autocomplete="@Url.Action("Search","Home")" />
</div>
Index view sayfamızın içeriği yukarıdaki gibi olmalıdır. Ne yaptığımıza biraz değinelim.
Öncelikle $(“:input[data-autocomplete]”) şeklinde bir multiple selector kullanarak tüm autocomplete property olan elementleri aldık. Daha sonra, bu elementlerin içerisinde each() metodu ile gezintiye çıktık. Autocomplete mekanizması, source(veri kaynağı) ihtiyacı olan bir kontrol olduğundan, hangi text input’a autocomplete özelliği vereceksek ona data-autocomplete adına bir property tanımlıyoruz. Ardından bu özelliğe vermek istediğimiz kaynağı belirtiyoruz. Biz burada Home controller sınıfının Search action metodunu belirtiyoruz. Bu sayede input texte yazmaya aşladığımızda Search metodu otomatikmen tetikleniyor.
Yukardaki şekildeki sonucu elde etmiş oluyoruz.