Select2 自动完成搜索未显示数据 asp.net mvc 5

Question

当我在 select2 文本框中键入或搜索任何内容时，它显示正在搜索，但不显示数据库中的数据。我在 searchProdauto 上设置了断点，当编译器出现时，

searchData 动作搜索数据成功但未显示在 select2 文本框中..

这是我的家庭控制器

 // GET: /Common/Home/
    public ActionResult Index()
    {
        return View();
    }
    [HttpGet]
    public JsonResult searchProdauto(string q)
    {
        var searchData = rep.GetAll().Where(x => x.ProductName.StartsWith(q, 

StringComparison.InvariantCultureIgnoreCase)).Select(y => 
  y.ProductName).ToList();
        return Json(searchData, JsonRequestBehavior.AllowGet);
    }

Index.cshtml查看代码

@using Medi.Modals
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/metro.min.js"></script>
<script   src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<link href="~/Content/metro.css" rel="stylesheet" />
<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<br />
<div class="cell auto-size padding20" style="margin-top:1rem;">
<h2>Select2 Examples</h2>
<h3>Basic</h3>
<select class="js-data-example-ajax">
    <option value="3620194" selected="selected">select2/select2</option>
</select>
<br />
</div>
<script type="text/javascript">

    $(".js-data-example-ajax").select2({
        ajax: {

            url: '@Url.Action("searchProdauto","Home")',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, page) {
                // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data
                return {
                    results: data.items
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,

    });

</script>

Answer 1

您必须根据您的 json 反对的定义更改您处理结果的方式 return 由您的控制器：

public JsonResult searchProdauto(string q)
{
    var searchData = rep.GetAll().Where(x => x.ProductName.StartsWith(q,StringComparison.InvariantCultureIgnoreCase)).Select(y => y.ProductName).ToList();
    return Json(searchData, JsonRequestBehavior.AllowGet);
}

您似乎正在尝试 return ProductName 的列表。 Select2 需要和 id 和 text.

您可以将代码更改为 return 具有 id 的 json 对象：

var searchData = rep.GetAll().Where(x => x.ProductName.StartsWith(q, StringComparison.InvariantCultureIgnoreCase))
    .Select(f => new
   {
    ProductName = f.ProductName,
    ProductId = f.ProductId
   })
.ToList();

return Json(searchData, JsonRequestBehavior.AllowGet);

然后你必须定义一个规则来将你的属性映射到 Select2 属性:

processResults: function (data, search) {
        return {
            results: $.map(data, function (item) {
                return {
                  id: item.ProductId ,
                  text: item.ProductName,
                }
            });
        };
}

我猜你必须更改 select2 数据成员，而且你没有将 page 传递给你的控制器：

data: function (params) {
        return {
           q: params.term, // search term
           // page: params.page
        };
},

您可能需要添加

templateResult: function (item) {
    if (item.loading) return item.text;
    return item.text;
},

创建 select2 元素的最终代码应如下所示：

$(".js-data-example-ajax").select2({
        ajax: {
            url: '@Url.Action("searchProdauto","Home")',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, 
                    // page: params.page
                };
            },
            processResults: function (data, search) {
                return {
                    results: $.map(data, function (item) {
                      return {
                        id: item.ProductId ,
                        text: item.ProductName,
                      }
                   });
               };
            },
            cache: true
        },
        templateResult: function (item) {
          if (item.loading) return item.text;
          return item.text;
        },      
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,

});

如果您想访问您选择的数据，您可以使用：

var data $('.js-example-data-ajax').select2('data');

它应该包含传入的值数组

templateResult: function (item) { }

因此，如果您想获取所选项目的 ProductName，您应该可以这样做：

$('.js-example-data-ajax').select2('data')[0].ProductName;

Select2 自动完成搜索未显示数据 asp.net mvc 5

Select2 auto complete search is not showing data asp.net mvc 5

asp.net-mvc

asp.net-mvc-5

jquery-select2