Невозможно выбрать элемент в Select2 drop down

Ответ 1

Что происходит:

По умолчанию, results объекта, который вы возвращаете в ajax.results, должен быть массивом в этой структуре [{id:1,text:"a"},{id:2,text:"b"}, ...].

  results: function (data, page) {
    var array = data.results; //depends on your JSON
    return { results: array };
  }

В Select2.js он фактически заявляет:

* @param options.results a function(remoteData, pageNumber, query) that converts data returned form the remote request to the format expected by Select2.
*      The expected format is an object containing the following keys:
*      results array of objects that will be used as choices
*      more (optional) boolean indicating whether there are more results available
*      Example: {results:[{id:1, text:'Red'},{id:2, text:'Blue'}], more:true}

Считывая исходный код, мы видим, что ajax.results вызывается при успешном выполнении AJAX:

   success: function (data) {
                        // TODO - replace query.page with query so users have access to term, page, etc.
                        // added query as third paramter to keep backwards compatibility
                        var results = options.results(data, query.page, query);
                        query.callback(results);
                    }

Итак, ajax.results - это просто функция для форматирования ваших данных в соответствующую структуру (например, [{id:a,text:"a"},{id:b,text:"b"}, ...]) до передачи данных на query.callback:

 callback: this.bind(function (data) {

                    // ignore a response if the select2 has been closed before it was received
                    if (!self.opened()) return;


                    self.opts.populateResults.call(this, results, data.results, {term: term, page: page, context:context});
                    self.postprocessResults(data, false, false);

                    if (data.more===true) {
                        more.detach().appendTo(results).html(self.opts.escapeMarkup(evaluate(self.opts.formatLoadMore, self.opts.element, page+1)));
                        window.setTimeout(function() { self.loadMoreIfNeeded(); }, 10);
                    } else {
                        more.remove();
                    }
                    self.positionDropdown();
                    self.resultsPage = page;
                    self.context = data.context;
                    this.opts.element.trigger({ type: "select2-loaded", items: data });
                })});

И что в конце концов query.callback - это правильно настроить логику, чтобы все было нормально, когда вы выбираете один из элементов и запускаете .selectChoice.

selectChoice: function (choice) {

            var selected = this.container.find(".select2-search-choice-focus");
            if (selected.length && choice && choice[0] == selected[0]) {

            } else {
                if (selected.length) {
                    this.opts.element.trigger("choice-deselected", selected);
                }
                selected.removeClass("select2-search-choice-focus");
                if (choice && choice.length) {
                    this.close();
                    choice.addClass("select2-search-choice-focus");
                    this.opts.element.trigger("choice-selected", choice);
                }
            }
        } 

Итак, если есть некоторая некорректная конфигурация (например, results не находится в правильной структуре), которая заставляет класс .select2-search-choice-focus не добавляться в элемент DOM до вызова .selectChoice, это происходит:

Выпадающее всплывающее окно остается открытым. Ничто не попадает в реальное поле. В консоли JavaScript нет ошибок. Как будто я ничего не нажал.

Решение

Существует много решений. Один из них, конечно же, выполняет манипуляции с массивами в ajax.results.

  results: function (data, page) {
  //data = { results:[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}] };
    var array = data.results;
    var i = 0;
    while(i < array.length){
        array[i]["id"] = array[i]['ItemId'];
        array[i]["text"] = array[i]['ItemText'];
        delete array[i]["ItemId"];
        delete array[i]["ItemText"];
    i++;
    }
    return { results: array };
  }

Но вы можете спросить: почему идентификатор должен быть "id", а текст "text" в массиве?

[{id:1,text:"a"},{id:2,text:"b"}] 

Может ли массив быть в этой структуре?

[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}]

Ответ: да. Вам просто нужно перезаписать функции id и text своими собственными функциями.

Вот оригинальные функции для .selecte2 в Select2.js:

    id: function (e) { return e == undefined ? null : e.id; },
    text: function (e) {
      if (e && this.data && this.data.text) {
        if ($.isFunction(this.data.text)) {
          return this.data.text(e);
        } else {
          return e[this.data.text];
        }
      } else {
        return e.text;
      }
    },

Чтобы перезаписать их, просто добавьте свои собственные функции внутри объекта, который вы проходите, в .selecte2:

$('#mySelect').select2({
id: function (item) { return item.ItemId },
text: function (item) { return item.ItemText }
......
});

Обновление

Что еще происходит:

Однако текст выбранного элемента не появляется в поле после закрытия списка.

Это означает, что .selectChoice успешно выполнен. Теперь проблема кроется в .updateSelection. В исходном коде:

   updateSelection: function (data) {

        var container=this.selection.find(".select2-chosen"), formatted, cssClass;

        this.selection.data("select2-data", data);

        container.empty();
        if (data !== null) {
            formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup);
        }
        if (formatted !== undefined) {
            container.append(formatted);
        }
        cssClass=this.opts.formatSelectionCssClass(data, container);
        if (cssClass !== undefined) {
            container.addClass(cssClass);
        }

        this.selection.removeClass("select2-default");

        if (this.opts.allowClear && this.getPlaceholder() !== undefined) {
            this.container.addClass("select2-allowclear");
        }
    }

Отсюда видно, что перед тем, как соответствующая строка текста будет помещена во вход, она вызовет formatSelection.

formatSelection: function (data, container, escapeMarkup) {
            return data ? escapeMarkup(this.text(data)) : undefined;
        },

Обновление: решение

Раньше я думал, что this.text(data) может быть перезаписано с помощью text: funcion(item){ ... } в параметрах, но, к сожалению, это не работает.

Поэтому, чтобы правильно отобразить текст в поле, вы должны перезаписать formatSelection, выполнив

$('#mySelect').select2({
id: function (item) { return item.ItemId },
formatSelection: function (item) { return item.ItemText }
//......
});

вместо того, чтобы пытаться перезаписать text (который должен, предположительно, иметь такой же эффект, но этот способ перезаписи еще не поддерживается/реализован в библиотеке)

$('#mySelect').select2({
id: function (item) { return item.ItemId },
text: function (item) { return item.ItemText }  //this will not work.
//......
});

Ответ 2

Проблема, с которой вы сталкиваетесь, заключается в том, что select2 хочет, чтобы все ваши результаты имели свойство id. Если это не так, вам нужно инициализировать с помощью функции id, которая возвращает идентификатор из каждого результата.

Это не позволит вам выбрать результат, если вы не удовлетворите одному из них. Итак, в случае вашего примера:

function getItemFormat(item) {
  var format = '<div>' + item.ItemName + '</div>';
  return format;
}

$(function() {
  $('#mySelect').select2({
    minimumInputLength: 5,
    placeholder: 'Search for an item',
    allowClear: true,
    id: function(item) { return item.ItemId; },    /* <-- ADDED FUNCTION */
    ajax: {
      url: '/api/getItems',
      dataType: 'json',
      quietMillis: 250,
      data: function (term, page) {
        return {
          query: term
        };
      },
      results: function (data, page) {
        return { results: data, id: 'ItemId', text: 'ItemText' };
      }
    },
    formatResult: getItemFormat,
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) { return m; }
  });
});

Ответ 3

Вам нужно предоставить идентификатор, который возвращается из вашего API, например, @itsmejodie. Другая проблема заключается в том, что вы должны предоставлять функции select2 formatResult и formatSelection, как только вы загрузили их из Ajax, но вы не можете поместить на них html. например:.

function format (item) { 
  return item.name; 
}

$(function() {
    $('#mySelect').select2({
      minimumInputLength: 2,
      placeholder: 'Search for an item',
      allowClear: true,
      ajax: {
        url: '/api/getItems',
        dataType: 'jsonp',
        quietMillis: 250,
        data: function (term, page) {
          return {
            query: term
          };
        },
        results: function (data, page) {
          return { results: data };
        }
      },
      formatResult: format,
      formatSelection: format
    });
});