如何从 select2 下拉列表中删除用户输入

Question

我正在使用带有 ajax 从远程服务器自动完成的 select2 jQuery 插件。但是用户输入会附加到下拉列表中。有人可以帮我解决如何不在 select2 自动完成下拉列表中显示用户输入吗？

这是我的js代码

$('#id_available_users').select2({
            placeholder: "Select an Existing User",
            allowClear: true,
            minimumInputLength: 3,
            tags: [],
            ajax: {
                url: '/api/users/',
                dataType: 'json',
                type: "GET",
                data: function (term) {
                    return {
                        query: term.term,
                    };
                },
                processResults: function (data) {
                if (data.length > 0)
                {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.name + ', ' + item.email + ', ' + item.location.city + ' ' + item.location.state + ' ' + item.location.zip + ' ' + item.location.country,
                            id: item.id,
                        }
                    })
                };
                }
                else return {results: [{ 'loading' : false, 'description' : 'No result', 'name' : 'no_result', 'text' : 'No result'}]}
            }
            },

        });

Answer 1

我终于明白了。以下是我的修复方法：

$('#id_available_users').select2({
        placeholder: "Select an Existing User",
        allowClear: true,
        minimumInputLength: 3,
        tags: [],
        templateResult: function formatState (state) {
            if (!state.id) {
                return state.text
            }
            if (!state.text.name && !state.text.email) {
               return; // here I am excluding the user input
            }
            var $state = '<p><b>'+ state.text.name + '</b>, ' + state.text.email + ', ' + state.text.location.city + ' ' + state.text.location.state + ' ' + state.text.location.zip + ' ' + state.text.location.country +'</p>';
            return $state;
        },
        ajax: {
            url: '/api/users/',
            dataType: 'json',
            type: "GET",
            data: function (term) {
                return {
                    query: term.term,
                };
            },
            processResults: function (data) {
            if (data.length > 0)
            {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item,
                        id: item.id,
                    }
                })
            };
            }
            else return {results: [{ 'loading' : false, 'description' : 'No result', 'name' : 'no_result', 'text' : 'No result'}]}
        }
        },
    });

在这里，我覆盖了 templateResult 并检查项目是否没有名称和电子邮件（这将是用户输入）只是 return true don '将其添加到下拉列表中。

如何从 select2 下拉列表中删除用户输入

How to remove user input from select2 dropdown list

javascript

jquery

jquery-select2

jquery-events