select2 установить начальное значение с загрузкой ajax и настраиваемым шаблоном

Я пробовал много вещей. я не могу инициализировать выбранные элементы по умолчанию. Значения всегда "не определены".

Кто-нибудь может мне помочь, пожалуйста!

я создаю de select2 и добавляю параметры для выбора.

var selected = [{
    "id": 50270924,
    "full_name": "zquestz/s",
    "description": "Open a web search in your terminal.",
    "language": "Go"
        }, {
    "id": 30494317,
    "full_name": "haosdent/s",
    "description": "s is a tool for ssh like z for cd",    
    "language": "Shell"
    }];

var $gitElement = $(".select2").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
        page: params.page
      };
    },
    processResults: function (data, page) {
      return {
        results: data.items
      };
    },
    cache: true
  },
  data:selected,
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1,
  templateResult: function(repo) {
    console.log("res", repo, this);
    return '<div class="select2CompanyName">'+repo.full_name+'</div>' +
           '<div class="select2CompanyTitle">'+repo.language+'</div>' +
           '<div class="select2CompanyTitle">'+repo.description+'</div>';
  },
  templateSelection: function(repo) {
    console.log("sel", repo, this);
    return '<div class="select2CompanyResult">' +
        '<div class="select2CompanyName">'+repo.full_name+' <br>'+ repo.language +'</div>' +
        '<i class="fa fa-pencil-square-o"></i>' +
            '</div>';
  }
});

for(var i in selected) {
    $(".select2").append('<option value="'+selected[i].id+'" selected="selected"></option>');
}

$(".select2").trigger("change");

эта версия: jsfiddle

уродливое решение было бы:

for(var i in selected) {
    $(".select2").append('<option value="'+selected[i].id+'" selected="selected">'+JSON.stringify(selected[i])+'</option>');
}

здесь работает, но некрасиво


jquery-select2 jquery-select2-4
person Gerstner Tamás    schedule 11.03.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

есть простой способ исправить это, вам просто нужно переместить логику шаблона в processResults, код должен быть примерно таким:

function displayItem(repo) {
return {
    id : repo.id,
  text : '<div class="select2CompanyName">'+repo.full_name+'</div>' +
       '<div class="select2CompanyTitle">'+repo.language+'</div>' +
       '<div class="select2CompanyTitle">'+repo.description+'</div>'
};
}

....

processResults: function (data, page) {
      return {
        results: $.map(data.items, displayItem);
      };
    },

Стоило мне когда-нибудь найти проблему. Я обновляю версию select2 до 4.0.2. проверить скрипку здесь

person NewBee    schedule 13.05.2016