AutoCopmplate در TextBox

برای این کار ابتدا از سایت Jquery ui فایل jquery UI  را دانلود کردم و به پروژه اضافه کردم ، البته مبتوان از CDn  نیز استفاده کرد.

برای جستجو از :Partial View استفاده میکنم ، اگر در کدها میبینید که نمایش داده میشود برای این مطلب است 

کد index  به این صورت شد.

@{
    ViewBag.Title = "Index";
    AjaxOptions options = new AjaxOptions
    {
        HttpMethod = "Get",
        OnFailure = "CustomerIndex",
        UpdateTargetId = "searchResult",
        InsertionMode = InsertionMode.Replace,
        LoadingElementId = "divLoading"
    };
}

<style>
    .modal-content {
        width: 600px !important;
        margin: 30px auto !important;
    }
</style>

<h2>لیست </h2>


<div id="divLoading" style="display:none;position:absolute;z-index:1001;margin-top:10%;margin-right:30%;">

    <img src="~/images/53.gif" alt="" style="width:70px;" />
</div>
@using (Ajax.BeginForm("Index","Customers", options))
{
    <div id="divLoading" style="color:red;width:200px;background-color:yellow;font-size:larger;display:none;position:absolute;">لطفا صبر کنید ....</div>
    <div class="form-group">
        <input type="text" name="SearchBox" id="SearchBox" class="form-control col-md-8" />
        <input type="submit" value="جستجو" class="btn btn-default" />
    </div>
}
<div id="searchResult">
    @{Html.RenderPartial("_Index", Model);}
</div>
<div id="modal-container" class="modal fade"
     tabindex="-1" role="dialog">
    <div class="modal-content">
    </div>
</div>
@section scripts{
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>

    <script>
         $(document).ready(function () {
            $("#SearchBox").autocomplete({
                source: '@Url.Action("SearchCodidates", "Customers")'

    });
  });
</script>
}

در ابتدا به دلیل جستجو و قرار است نتایج جستجو به صورت json  برگشت داده شود (در پستی جدا توضیح خواهم داد) تنظیمات ajax  را انجام دادیم و ارسالی فرم را نیز تنظیم کردیم ، 

در قطعه کد jquery تنظیمات مربوط به کنترل و اکشن رانجام داده ایم

در ادامه کد کنترل را میبینیم 

public virtual async Task<ActionResult> Index(string SearchBox)
        {
            var customers = db.Customers
                .Include(c => c.City)
                .Include(c => c.CustomerType)
                .Include(c => c.Province)
                .Where(x=>x.LastName.StartsWith(SearchBox)|| SearchBox == null);

            if (Request.IsAjaxRequest())
            {
                return PartialView("_Index", customers);
            }
            
            return View(await customers.ToListAsync());
        }
        public JsonResult SearchCodidates(string term)
        {
           
            var customerAuto = db.Customers
                .Include(c => c.City)
                .Include(c => c.CustomerType)
                .Include(c => c.Province)
                .Where(x => x.LastName.StartsWith(term))
                .OrderByDescending(x => x.LastName)
                .Take(2)
                .Select(x => x.LastName);
            return Json(customerAuto, JsonRequestBehavior.AllowGet);
            //return String.Join(Environment.NewLine,customerAuto.ToArray());
        }

امیدوارم کار امد باشد. خوشحال میشم اگر کمک بیشتری بتوانم انجام دهم