Как использовать select2 с удаленными данными, если элементы данных не предоставляют имена полей «id» и «text»?

Question

Как использовать select2 с удаленными данными, если элементы данных не предоставляют имена полей «id» и «text»?

0

У меня есть drop2, который настроен для использования с удаленными данными. Однако мой удаленный источник данных обеспечивает результаты поиска в формате, который кажется несовместимым с select2. Удаленные данные, например, выглядят следующим образом:

...
items: [ { value: 1, displayText: "First" }, { value: 2, displayText: "Second" } ]
...

но select2, похоже, ожидает поля "id" и "text". Я проверил все параметры и попытался сыграть с formatSelection formatResult formatSelection, formatResult, но до сих пор не имел успеха, я всегда получаю ошибки javascript в отношении "item.text", которые не определены.

Я не могу предоставить jsFiddle, потому что веб-API не является публичным, к сожалению.

Есть ли способ настроить select2 для использования пользовательского поля "id" и "text"? Или что еще может быть хорошим обходным путем для этого сценария?

Zoltán Tamási 30 апр. 2014, в 10:34

Источник

Теги:

javascript

jquery

jquery-select2

1 ответ

Ещё вопросы

Zoltán Tamási · Answer 1 · 2014-04-30T05-50-00.000Z

Хорошо, я понял это почти сразу после того, как я разместил свой вопрос. Наверное, это не самый эффективный способ сделать это, поэтому я до сих пор счастлив, если у кого-то есть лучший ответ.

Мне удалось выполнить преобразование в обратном ajax results в параметрах ajax.

$("#mySelect").select2({
      minimumInputLength: 3,
      ajax: {
        url: '/',
        params: {
          type: 'POST',
          dataType: 'json',
        },
        quietMillis: 200,
        data: function(term, page) { // page is the one-based page number tracked by Select2
          return {
            search: term,
            pageSize: 10,
            pageIndex: page-1,
          };
        },
        results: function(data, page) {
          var more = (page * 10) < data.Total; // whether or not there are more results available
          return { results: $.map(data.Results, function(e, i) {
            return { id: e.value, text: e.displayText, data: e };
          }), more: more };
        }
      }