در این مقاله میخواهیم در MVC از AutoComplete استفاده کنیم

یک برنامه از نوع MVC بسازید سپس روی پوشه Model کلیک راست کرده و یک کلاس به نام Person بسازید:

 public int PersonId { get; set; }
        public string PersonName { get; set; }

حالا رو یپوشه Controller کلیک راست کنید و گزینه Add سپس Controller را انتخاب کنید از لیست ظاهر شده Mvc 5 Controller With Views,Using Entity Framework را انتخاب کنید در پنجره Add Controller مدل خود را یعنی person را انتخاب کنید و بروی add کلیک کنید سپس برنامه را اجرا کنید و تعدادی نام به پروژه خود اضافه کنید سپس از منوی tools گزینه Nuget Package Manager و Manage Nuget Packages For Solution را انتخاب کنید و به قسمت آنلاین بروید و در سمت بالا سمت راست کلمه jQuery UI Autocomplete را جستجو کنید و( Jquery Ui (Combined Library را انتخاب و روی Install کلیک کنید و منتظر بمانید تا فایل های لازم به پروژه شما اضافه شود.سپس برنامه رو stop کنید به ویو Create بروید و فیلد PersonName را به شکل زیر تغییر دهید:

        <div class="form-group">
            @Html.LabelFor(model => model.PersonName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(Model => Model.PersonName,
        new
        {
            @class = "autocomplete-with-hidden",
            data_url = Url.Action("GetListForAutocomplete", "People")
        })
                @Html.HiddenFor(Model => Model.PersonId)
                @Html.ValidationMessageFor(model => model.PersonName)
            </div>
        </div>

در انتهای ویو اسکریپت زیر را بنویسید:

<script>
    $(function () {
        $('.autocomplete-with-hidden').autocomplete({
            minLength: 0,
            source: function (request, response) {
                var url = $(this.element).data('url');

                $.getJSON(url, { term: request.term }, function (data) {
                    response(data);
                })
            },
            select: function (event, ui) {
                $(event.target).next('input[type=hidden]').val(ui.item.id);
            },
            change: function (event, ui) {
                if (!ui.item) {
                    $(event.target).val('').next('input[type=hidden]').val('');
                }
            }
        });
    })
</script>

توسط اسکریپت بالا از طریق json به کنترلر رفته عمل جستجو را انجام داده و نتیجه از نوع json پاس داده میشود حال به Controller  خود رفته و یک تابع با فرمت json مینویسیم:

 public JsonResult GetListForAutocomplete(string term)
        {
            Person[] matching = string.IsNullOrWhiteSpace(term) ?
                db.People.ToArray() :
                db.People.Where(p => p.PersonName.ToUpper().StartsWith(term.ToUpper())).ToArray();

            return Json(matching.Select(m => new
            {
                id = m.PersonId,
                value = m.PersonName,
                label = m.ToString()
            }), JsonRequestBehavior.AllowGet);
        }

حالا میتونید برنامه خود را اجرا کنید ودر ویوی Create  در هنکام تایپ نام AutoComplete عمل خواهد کرد.