Question

我正在尝试使用Active Directory中的搜索结果填充可搜索的Select2表单控件。

这是我的select2函数：

$("#networkUserSelect").select2({

    ajax: {
        url: '/Account/ADStartsWith',
        dataType: 'json',
        delay: 250,
        processResults: function (data, params) {
            return {
                results: $.map(data, function (item)
                /**http://api.jquery.com/jquery.map/ **/ {
                var name;
                var id;
                if (typeof (item.displayname) !== "undefined") {
                    name = (item.displayname["0"].replace("  ", " "));
                    id = (item.samaccountname["0"] + "@@email.com");
                    return {
                        text: name,
                        slug: name,
                        id: id
                    }
                }
                else {
                    console.log("display name undefined.");
                }
            })
        };
    },
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 1
});

该网址指向一个C＃WebMethod，它将Active Directory数据作为JsonResult返回。根据邮递员的说法，这是JsonResult格式：

"results": [
        {
            "id": 1,
            "text": "XXX",
            "displayName": "XXX",
            "SAMAccountName": "XXX",
            "givenName": "XXX",
            "sn": "XXX",
            "company": "XXX"
        },
        {
            "id": 2,
            "text": "YYY",
            "displayName": "YYY",
            "SAMAccountName": "YYY",
            "givenName": "YYY",
            "sn": "YYY",
            "company": "YYY"
        }
    ]

JSON成功发送回AJAX。 processResults参数包含预期的值。

在$.map部分的某个时刻，它会使结果无效并且变为＆＃34;未定义＆＃34;，我收到错误Cannot read property 'results' of undefined。

根据Select2 documentation，我的JSON格式正确。

我不确定我错过了什么。

Answer 1

实际上你的返回json存在问题。它应该用{}完全包含，如下所示：

{"results": [
    {
        "id": 1,
        "text": "XXX",
        "displayName": "XXX",
        "SAMAccountName": "XXX",
        "givenName": "XXX",
        "sn": "XXX",
        "company": "XXX"
    },
    {
        "id": 2,
        "text": "YYY",
        "displayName": "YYY",
        "SAMAccountName": "YYY",
        "givenName": "YYY",
        "sn": "YYY",
        "company": "YYY"
    }
]}

接下来，我不确定您希望如何处理返回的数据，但这是它的工作版本：

$("#networkUserSelect").select2({

    ajax: {
        url: 'results.json',
        dataType: 'json',
        delay: 250,
        processResults: function (data, params) {
            return { 
                results: data.results.map(item => 
                    ({ 
                        text: item.displayName, 
                        id: item.SAMAccountName + "@email.com",
                        slug: item.displayName
                    })
                )}
        },
        escapeMarkup: function (markup) { return markup; }, 
        minimumInputLength: 1
    }
});

一旦你开始工作，也许你应该处理过滤后端数据并将data param传递给请求体，因为它包含查询过滤器和分页属性。

Answer 2

你输错了它应该是displayName＆amp; SAMAccountName和data到data.results，也许是最后item.displayName["0"]到item.displayName

＆＃13;

$("#networkUserSelect").select2({
  ajax: {
    //url: '/Account/ADStartsWith',
    url: '//api.jsonbin.io/b/5af7d3a97a973f4ce5783c02',
    dataType: 'json',
    delay: 250,
    processResults: function(data, params) {
      return {
      	
        results: $.map(data.results, function(item) {
          var name;
          var id;
          if (typeof(item.displayName) !== "undefined") {
            name = (item.displayName.replace("  ", " "));
            id = (item.SAMAccountName + "@@email.com");
            return {
              text: name,
              slug: name,
              id: id
            };
          }
          else {
            console.log("display name undefined.");
          }
        })
      };
    },
    escapeMarkup: function(markup) {
      return markup;
    },
    minimumInputLength: 1
  }
});

＆＃13;

.select2-container{width:300px !important}

＆＃13;

<link href="https://select2.org/assets/7c647dd1b60ff2b17a493d7f00a18e26.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.6-rc.1/dist/js/select2.min.js"></script>

<select id="networkUserSelect"></select>

＆＃13;

Select2给出错误＆＃34;无法读取属性＆＃39;结果＆＃39;未定义＆＃34;

2 个答案: