Select2, append 不显示标题

Question

所以我在使用 select2 自动完成框时遇到了这个问题，当我尝试为框创建 object 时，它创建得很好，但是 object 未显示在框中，唯一显示的是 "X" 以清除 object。

该框的主要重点是设置数据库中的值，以便稍后对其进行编辑（添加、删除等）。我想要这样做的方式是首先从数据库中获取 object 然后在 select2 框中创建它。

这是我的 javascript 文件：

$('#recipefield').select2({
        id: function(data){return data.id;},
        maximumSelectionLength: 5,
        minimumSelectionLength: 3,
        ajax: {
            url: function () {
                return getTypedAutoCompleteUrl();
            },
            dataType: 'json',
            processResults: function (data) {
                  return {
                    results: data
                  };
                }
        },
        templateResult: formatState,
        templateSelection: formatState
    });
});

function getTypedAutoCompleteUrl() {
    return '/api/v1/recipe/' + $('#menutype').val();
}

function formatState (state) {
    if (!state.id) {
        return state.text;
    }
    return state.title;
}

这就是我用来将 object 添加到框中的内容：

var data = {
    id: 1,
    text: 'text'
};
var newOption = new Option(data.text, data.id, true, true);
$('#recipefield').append(newOption).trigger('change');

所以在添加 object 之后盒子看起来像这样：

这是我手动 select object 时的样子：

Answer 1

所以，我终于成功了，也许对某些人有用。

创建了这个函数。

function recipeHelper(){
    var recipeList = $("#recipefield").select2("data");
    for(i=0; i<recipeList.length; i++){
        var recipeObject = recipeList[i];
        recipeObject.name = recipeObject.text;
    }
    $("#recipefield").trigger('change');
}

在

中调用了"recipeHelper"函数

$(document).ready(function() {
    ...
    recipeHelper();
});

希望对大家有所帮助。

Select2, append 不显示标题

Select2, append doesn't show the title

javascript

jquery

jquery-select2

jquery-select2-4