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

8/3/2017 MVC
4717

برای لیست های باز ما عموما بعد از باز شدن لیست باز شو یکی از ایتمهای لیست باز شو را انتخاب  میکنیم و Id این ایتم با استفاده از اکشن در منترل در بانک اطلاعاتی ذخیره می شود.

انچه نیاز داشتم این بود که به جای لیست باز شو ایتمها به صورت لیست در یک textbox نمایش داده شوند و با انتخاب هر ایتم آن ایتم به textbox اضافه شود و با , کاما از یکدیگر جدا شود.

 

برای این کار چیزی که نیاز داشتم استفاده از 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  استفاده کنیم به جای نام انتخابی ای دی آن نمایش داده میشود.