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 对象的定义更改处理结果的方式：

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);
}

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

您可以更改代码以返回带有 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;