Auto Complete داینامیک در MVC

در این مقاله با نحوه کار با پلاگین Auto Complete در کتابخانه JqueryUI و اتصال آن به مدلی که در پروژه وجود دارد آشنا خواهیم شد و استفاده داینامیک از آن را فراخواهید گرفت.

ابتدا باید پروژه ای بازبان C# و به صورت Asp.net ایجاد کنیم.
با استفاده از Nuget اقدام به نصب Jquery و Jquery UI می کنیم.

سپس با توجه به شکل زیر Jquery و Jquery UI را نصب می کنیم.
در این مرحله اقدام به ایجاد یک کنترلر می کنیم.
و نام آن را Home قرار می دهیم.

در اکشن متد Index آن اقدام به ایجاد یک ویو می کنیم مطابق شکل زیر:

در این مرحله اقدام به ایجاد یک مدل به نام Country می کنیم که این نشان دهنده کشور است.

سپس دو متغیر برای کلاس یا مدل Country قرار می دهیم.
کد زیر نشان دهنده مدل Country می باشد.

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 می نویسم ، که خروجی آن Json است :

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);
        }

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


@{
    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>

حالا از پروژه اجرا می گیریم.