AutoCopmplate در TextBox

3/21/2017 MVC
3450

برای جستجوی مشتری نیاز داشتم تا زمانی که کاربر ابتدای نام خانوادگی را جستجو میکند تمامی نامهای خانوادگی متناسب با آن به صورت لیستی باز شو نمایش داده شوند

برای این کار ابتدا از سایت 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());
        }

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