Select2

Question

我正在使用 Select2 进行自动完成，并且正在从远程加载列表。

看看下面的代码：

HTML:

<div>
    <select class="tagsSearch" style="width: 100%">
        <option value="2" selected="selected"></option>
    </select>
</div>

jQuery:

<script type="text/javascript">
$(".tagsSearch").select2({
placeholder: 'Search for tags',
tags: true,
multiple: true,
tokenSeparators: [',', ' '],
minimumInputLength: 2,
minimumResultsForSearch: 1,
ajax: {
    url: function (params) {
        return '/api/searchTags?text=' + params.term;
    },
    dataType: "json",
    type: "GET",
    processResults: function (data) {
        return {
            results: $.map(data, function (name) {
                return {
                    name: name,
                }
            })
        };
    }
}
});
</script>

问题：当使用参数对 URL 进行网络调用并且结果返回时，它没有显示在我的下拉列表中。

实际 API 响应（我从浏览器网络日志中看到：

[{"name":"bottomline-technologies"}]

这是前端的样子：

所以 API 响应正常。我在这里做错了什么？

提前致谢

Answer 1

由于 JohnS 在 this post.

上指出的内容，此问题已修复

问题是 processResults 应该 return 一个 id 和 text 变量。你只需要按照我下面的最终解决方案映射它们：

$(".tagsSearch").select2({
placeholder: 'Search for tags',
delay: 250,
tags: true,
multiple: true,
tokenSeparators: [',', ' '],
minimumInputLength: 2,
minimumResultsForSearch: 1,
ajax: {
    url: function (params) {
        return '/api/searchTags';
    },
    dataType: "json",
    type: "GET",
    data: function (params) {
        return {
            text: params.term 
        };
    },
    processResults: function(data){
        return{
            results: $.map(data, function(obj){
            return {
                id: obj.name, text: obj.name // <- this is what was done to fix the issue
            };
          })
        };
    }}
});

PS：这还包括一些代码清理，但问题在于缺少变量。

Select2 - API 工作时不显示下拉菜单

Select2 - Dropdown is not showing while API is working

jquery