نمایش textbox برای ورود تگ tag یا autocomplete multiple

برای این کار چیزی که نیاز داشتم استفاده از autocomplate از jqueryui بود ، ابتدا با استفاده از سفارشی کردن jquery-ui قسمت autocomplate را دانلود کردم و به پروژه اضافه کردم 

در ادامه در کنترل یک اکشنی به این صورت نوشتم 

        [HttpPost]
        public JsonResult GetAutoEmpName(string Prefix)
        {

           

            var pt = db.ProductTypeSubCategories.Where(x => x.PersianName.StartsWith(Prefix))

            //.Select(s=>s.PersianName ); 

            .Select(s => new SelectListItem { Value = s.Id.ToString(), Text = s.PersianName }); ;

            //var EmpName = (from e in  db.ProductTypeSubCategories
            //    where e.PersianName.ToLower().StartsWith(Prefix.ToLower())
            //    select new { e.PersianName });

            return Json(pt, JsonRequestBehavior.AllowGet);
        }

این اکشن اطلاعات را از بانک اطلاعاتی جدول ProductTypeSubCategories میخواند و هر عبارتی که به آن پاس داده شود که با PersianName شروع شده باشد را به صورت لیت بر میگرداند ، در کد قسمت کامنت اول 

 //.Select(s=>s.PersianName ); ;

برای اینکه فقط اطلاعات برگشت داده شده و هیچ ایدی از اطلاعات ذخیره شده در جدول ProductTypeSubCategories به شمت ویوو ارسال نگردد و در قسمت کامنت دوم 

 //var EmpName = (from e in  db.ProductTypeSubCategories
            //    where e.PersianName.ToLower().StartsWith(Prefix.ToLower())
            //    select new { e.PersianName });

برای کاربرانی که از lambda  استفاده نمیکنند گذاشته ام البته نمونه کدی است که از این سایت برداشتم

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

<script>
        $(document).ready(function () {

            $("#ProductTypeSubCategory").autocomplete({
                source: function (req, resp) {
                    $.ajax({
                        url: '@Url.Action("GetAutoEmpName", "PropertiesOfContainers")',
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: GetCurrentSearchTerm(req.term) },
                        success: function(data) {
                            resp($.map(data,
                                function(item) {
                                    return { label: item.Text, value: item.Value };
                                }));
                        }
                    });
                },

                select: function (event, ui) {
                    var LastValue = splitCurrentText(this.value);
                    LastValue.pop();
                    LastValue.push(ui.item.label);
                    LastValue.push("");
                    this.value = LastValue.join(",");
                    return false;
                },
                focus: function () {
                    return false;
                }
            });
            function splitCurrentText(LastTerm) {

                return LastTerm.split(/,\s*/);
            }

            function GetCurrentSearchTerm(LastTerm) {

                return splitCurrentText(LastTerm).pop();
            }
        });
    </script>

در تعریف این کد ProductTypeSubCategory ای دی مربوط به textbox ی است که قرار شده اطلاعات را در آن نمایش دهیم 

   return { label: item.Text, value: item.Value };

 در این قسمت کد مربوط به ایتمهایی است که از سوی کنترل میخوانیم و میتوانیم در ویوو نمایش دهیم

و در قسمت 

   select: function (event, ui) {
                    var LastValue = splitCurrentText(this.value);
                    LastValue.pop();
                    LastValue.push(ui.item.label);
                    LastValue.push("");
                    this.value = LastValue.join(",");
                    return false;
                },

در ui.item.lable  باعث میشود که نام انتخابی را در textbox  نمایش دهد و اگر به جای lable  از value  استفاده کنیم به جای نام انتخابی ای دی آن نمایش داده میشود.