将 select2 ajax 结果显示到模板中-解网

问：

我有 select2 在进行 ajax 调用后显示数据。

 <script>
    $(document).ready(function () {
        $("#citySelect").select2({
            theme: 'bootstrap-5',
            placeholder: "Search for your city",
            dropdownAutoWidth: true,
            width: 'auto',
            minimumInputLength: 3,
            allowClear: true,
            async: true,
            ajax: {
                url:
                    function (params) {
                        return '@GatewaySettings.Value.Url' + '/api/location/cities/' + params.term;
                    },
                contentType: "application/json; charset=utf-8",
                type: 'GET',
                processResults: function (result) {
                    return {
                        results: $.map(result, function (item) {
                            return { id: item.id, text: item.city };
                        }),
                    };
                }
            }
        });
    });
</script>

我可以搜索城市列表

我希望活动搜索结果显示为城市 + '、' + 州 + ' ' + zip（即加利福尼亚州洛杉矶 90001），选择后仅显示城市（即洛杉矶）。

我正在尝试遵循文档，但我不断得到一个未定义的结果。

下面是控制台的输出

我敢肯定我只是不明白如何使用模板。

  <script>
    $(document).ready(function () {
        $("#citySelect").select2({
            theme: 'bootstrap-5',
            placeholder: "Search for your city",
            dropdownAutoWidth: true,
            width: 'auto',
            minimumInputLength: 3,
            allowClear: true,
            async: true,
            templateResult: function (item) {
                console.log(item);
                return item.city + ', ' + item.state + ' ' + item.zip;
            },
            templateSelection: function (item) {
                return item.city
            },
            ajax: {
                url:
                    function (params) {
                        return '@GatewaySettings.Value.Url' + '/api/location/cities/' + params.term;
                    },
                contentType: "application/json; charset=utf-8",
                type: 'GET',
                cache: true,
                processResults: function (result) {
                    return {
                        results: $.map(result, function (item) {
                            return { id: item.id, text: item.city };
                        }),
                    };
                }
            }
        });
    });
</script>

任何帮助不胜感激

添加后控制台的结果

console.log("RESULTS", JSON.stringify(result, null, 2));

RESULTS [
  {
    "id": 5039,
    "city": "Chandlers Valley",
    "state": "Pennsylvania",
    "zip": null
  },
  {
    "id": 14327,
    "city": "Chandlersville",
    "state": "Ohio",
    "zip": null
  },
  {
    "id": 15915,
    "city": "Chandler",
    "state": "Indiana",
    "zip": null
  },
  {
    "id": 19293,
    "city": "Chandler",
    "state": "Minnesota",
    "zip": null
  },
  {
    "id": 22001,
    "city": "Chandlerville",
    "state": "Illinois",
    "zip": null
  },
  {
    "id": 26294,
    "city": "Chandler",
    "state": "Oklahoma",
    "zip": null
  },
  {
    "id": 26686,
    "city": "Chandler",
    "state": "Texas",
    "zip": null
  },
  {
    "id": 29715,
    "city": "Chandler",
    "state": "Arizona",
    "zip": null
  },
  {
    "id": 29716,
    "city": "Chandler",
    "state": "Arizona",
    "zip": null
  },
  {
    "id": 29717,
    "city": "Chandler",
    "state": "Arizona",
    "zip": null
  }
]

jquery ajax jquery-select2-4

templateResult: ({ city, state, zip }) =>
  `${city}, ${state} ${zip ?? ""}`.trim(),
templateSelection: ({ city }) => city,
ajax: {
  url: ({ term }) =>
    "@GatewaySettings.Value.Url" +
    `/api/location/cities/${encodeURIComponent(term)}`, // encode the term
  processResults: (results) => ({ results }),
}

关于属性的一些说明...ajax

默认方法（类型）为GET
默认属性为cachetrue
GET 请求没有内容，因此不需要contentType

将 select2 ajax 结果显示到模板中

Display select2 ajax results into template

评论

评论