изменить значение параметра в тегах select2 ajax

Question

У меня есть этот код для метода тегов select2 с использованием ajax:

json data:

[
    {
        "id": "5",
        "text": "laravel3"
    },
    {
        "id": "4",
        "text": "laravel2"
    }
]

Код:

$(document).ready(function(){
    $('#tag_list').select2({
        placeholder: "Choose tags...",
        tags: true,
        minimumInputLength: 3,
        tokenSeparators: [",", " "],
        createSearchChoice: function(term, data) {
            if ($(data).filter(function() {
                return this.text.localeCompare(term) === 0;
            }).length === 0) {
                return {
                    id: term,
                    text: term
                };
            }
        },
        ajax: {
            url: '/tags/find',
            dataType: 'json',
            data: function (params) {
                return {
                    q: $.trim(params.term)
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            delay: 250,
            cache: true
        }
    });
});

С моим кодом Я могу искать и выбирать данные из базы данных или добавить новый тег в мою область select2. Теперь, когда я выбираю данные из базы данных, <option value=""> - это данные id, но при добавлении нового тега <option value=""> - это name (текст), например:

Теперь мне нужно изменить параметр value (получить данные базы данных) с данных id на данные name (текст). Как изменить значение данных опции с id на name?!

Answer 1

Обновление: Я добавил больше фона и ссылок на документы и переключил JSFiddle на использование $.map() в качестве документов.

Формат данных Select2 описано в документации:

Select2 ожидает очень специфический c формат данных [...] Select2 требует, чтобы каждый объект содержал свойства id и text. [...] Select2 генерирует атрибут value из свойства id объектов данных ...

Документы также описывают , как использовать что-то отличное от вашего id:

Если вы используете свойство, отличное от id (например, pk), для уникальной идентификации опции, вам необходимо сопоставить старое свойство с id перед его передачей Выбрать2. Если вы не можете сделать это на своем сервере или находитесь в ситуации, когда API не может быть изменен, вы можете сделать это в JavaScript перед передачей его в Select2

В вашем случае это будет означать преобразуя data, который вы получите после вызова AJAX, так что элемент id каждого результата фактически равен значению text.

Это можно сделать с помощью опции processResults() AJAX . Чтобы сделать это, используя $.map в качестве документа:

processResults: function (data) {
    return {
        // Transform data, use text as id
        results: $.map(data, function (obj) {
            obj.id = obj.text;
            return obj;
        })
    };
}

Вот работающий JSFiddle . Примечание. Я настроил его для имитации вашего реального AJAX запроса с использованием опции /echo/json asyn c в JSFiddle.

И вот снимок экрана сгенерированного источника, показывающий value обоих добавленных тегов и те, которые получены с помощью AJAX, представляют собой имя (text):

Answer 2

Попробуйте это:

ajax: {
    url: '/tags/find',
    dataType: 'json',
    data: function (params) {
        return {
            q: $.trim(params.term)
        };
    },
    //updated 
    processResults: function (data) {
        var newData = [];
        $.each(data, function (index, item) {
            newData.push({                        
                    id: item.id, //id part present in data                        
                    text: item.text //string to be displayed
            });
        });
        return { results: newData };
    },
    //
    delay: 250,
    cache: true
}