آموزش AutoComplete در asp.net MVC

حتما تا به حال در هنگام جستجو در گوگل دیده اید که زمان تایپ کردن بصورت خودکار کلماتی را پیشنهاد می دهد. این ویژگی بسیار جالب کمک می کند تا کاربر هرچه سریعتر به نتیجه دلخواه حود برسد و در نتیجه رابط کاربری وبسایت شما بهبود پیدا می کند. در این مقاله قصد داریم آموزش AutoComplete در asp.net MVC را آموزش دهیم.

پلاگین های مورد نیاز برای AutoComplete در asp.net MVC

برای این کار از قابلیت autocomplete خود جی کوئری برای این کار استفاده کنید. برای استفاده از قابلیت autocomplete در جی کوئری می تونید از این لینک استفاده کنید. در رفرنس های زیر:

اولی همان اسکریپت کتابخانه جی کوئری است که اگر از قبل دارید می تونید این رفرنس را لینک نکنید
و دومی هم اسکریپت jquery-ui هست که برای استفاده از قابلیت AutoComplete در جی کوئری مورد نیاز هست.

 <script src="//code.jquery.com/jquery-1.12.4.js"></script>
 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

ایجاد یک class برای ارتباط با دیتابیس

برای انتخاب کلمات کلیدی نیاز به یک کوئری از دیتابیس با توجه به عبارتی که در textbox تایپ شده است را داریم. برای این منظور شما می توانید با استفاده از تکنولوژی Entity Framework به دیتابیس دست رسی پیدا کنید که موضوع مقاله آموزشی ما نیست. برای سادگی کار ما با استفاده از یک class لیستی از اطلاعات را ساختیم.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
 
namespace jQuery_UI_AutoComplete.Models
{
    public class Country
    {
        [Key]
        public int ID { get; set; }
 
        public string Name { get; set; }
 
    }
}

حال لیستی از کشورها را با فرمت JSON ایجاد می کنیم
برای این کار یک Action به نام AutoCompleteProduct می نویسیم:

public JsonResult AutoCompleteCountry(string term = "")
        {
            List<Country> lst = new List<Country>();
            Country c1 = new Country() { ID = 1, Name = "Iran" };
            Country c2 = new Country() { ID=1,Name="Uk"};
            Country c3 = new Country() { ID=1,Name="India"};
            lst.Add(c1);
            lst.Add(c2);
            lst.Add(c3);
 
 
            var result = (from r in lst
                          where r.Name.ToLower().Contains(term.ToLower())
                          select new { r.Name, r.ID }).Distinct();
 
            return Json(lst, JsonRequestBehavior.AllowGet);
        }

ارتباط Ajax با AutoComplete برای گرفتن اطلاعات

در این مرحله باید با استفاده از Jquery و Jquery UI اقدام به ایجاد AutoComplete کنیم، کد Ajax را برای تغذیه منبع AutoComplete استفاده می کنیم که در واقع خروجی همان Action فوق است که یک Json است.

@{
    ViewBag.Title = "Index";
    Layout = null;
}
 
<body dir="rtl">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
    <br /><br />
    <br /><br />
    <br /><br />
    <h4>نام کشور را جست و جو کنید...</h4>
    <input type="text" class="form-control" id="txt_Search" placeholder="نام کشور را جست و جو کنید..." style="width:200px;font-size :10px; height :30px;" />
 
 
 
    <link href="~/Content/themes/Flick/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txt_Search").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Home/AutoCompleteProduct",
                        type: "POST",
                        dataType: "json",
                        data: { term: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.Name, value: item.Name };
                            }))
                        }
                    });
                }
            });
        });
    </script>
</body>

از اینکه ما را در مقاله آموزش AutoComplete در asp.net MVC همراهی کردید از شما سپاس گذاریم.

مقاله پیشنهادی :

آپلود فایل با Ajax در ASP.net mvc بوسیله File Upload