javascript - Mvc5 Select2基于searchTerm通过ajax加载结果

Question

我正在尝试使用 Select2 并根据搜索词使用 ajax 加载数据。我看了很多例子，但我就是不知道我错过了什么。

我添加了 select2.css 和 select.js 并将它们包含在布局 View 中。

@Styles.Render("~/Content/css")
    <link type="text/css" rel="Stylesheet" href="@Url.Content("~/Content/select2.css")" />
@Scripts.Render("~/bundles/jquery")
    <script type="text/javascript" src="../../Scripts/select2.min.js"></script>

这是在显示搜索文本框的 View 中:

// Not sure what here should be also.
<input id="productSelect" style="width:200px" />


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
$(function () {
        $('#productSelect).select2({
            placeholder: 'Select a product',
            minimumInputLength: 1,
            ajax: {
                url: '@Url.Action("SearchProducts", "Product")',
                dataType: 'json',
                data: function (term, page) {
                    return {
                        searchTerm: term
                    };
                },
                results: function (data, page) {
                    return { results: data };
                }
            }
        });

    });
</script>
}

这是 Controller 中的方法:

public JsonResult SearchProducts(string searchTerm)
        {
            var products = Db.Products.Where(p => p.Name.Contains(searchTerm));
            var result = products.Select(p => new { id = p.Id, text = p.Name });
            return Json(result, JsonRequestBehavior.AllowGet);
        }

文本框未显示数据或搜索任何内容。有人可以解释一下应该如何正确完成吗？谢谢。

Answer 1

select2 下拉菜单也像搜索框一样工作。因此，通常您不需要<input id="productSelect" style="width:200px" />作为输入。相反，请执行以下操作:

1. 创建<select>标签

<select id="productSelect">
    <option value="" selected="selected">Search for product...</option>
</select>

设置脚本

$("#productSelect").select2({
  ajax: {
    url: '@Url.Action("SearchProducts", "Product")',
    dataType: 'json',
    delay: 250,
    data: function (term) {
      return {
        searchTerm: term, // search term
      };
    },
    processResults: function (data) {
      
      return {
        results: data
      };
    },
    cache: true
  },
  minimumInputLength: 1,
});

如果您需要批量加载数据，给人一种无限滚动的错觉，那么修改您的 Controller 以返回 JSON data有两个参数:批处理(我称之为 Items )和总计数(我称之为 TotalCount )。您的脚本将如下所示:

$("#productSelect").select2({
  ajax: {
    url: '@Url.Action("SearchProducts", "Product")',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      params.page = params.page || 1;
      return {
        searchTerm: params.term, // search term
        page: params.page, // 1-based page indexing
      };
    },
    processResults: function (data, params) {
      
      params.page = params.page || 1;
      return {
          results: data.Items,
          pagination: {
              more: (params.page * 30) < data.TotalCount
          }
      };
    },
    cache: true
  },
  minimumInputLength: 1,
});