Select2，追加不显示标题

Question

所以我在选择2自动完成框时遇到了这个问题，当我尝试向该框创建对象时，它创建得很好，但是该对象的名称未显示在框中，唯一显示的是“ X以清除对象。

该框的主要焦点是设置数据库中的值，以便以后对其进行编辑（添加，删除等）。 我要执行的方法是先从数据库中获取对象，然后在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;
}

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

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

因此，在向其添加对象后，该框如下所示：

这是我手动选择对象时的样子：

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();
});

希望它能帮助到别人。