Select2 Ajax Method Not Selecting

Хорошо, я уверен, что здесь что-то не так просто, но я не на 100%, что это такое.

Поэтому я пытаюсь использовать метод Select2 AJAX как способ поиска пользователей в базе данных и выбора результата. Сам вызов возвращается с результатами, однако он не позволит мне выбрать ответ из списка. Он также не позволяет вам "выбирать" его при наведении или стрелке вверх/вниз. Итак, без дальнейших церемоний, вот мой код:

index.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" />
        <script src="select2/select2.js"></script>
        <script src="select.js"></script>
    </head>
    <body>
        <input type="text" style="width: 500px" class="select2">
    </body>
</html>

select.js

jQuery(function() {

  var formatSelection = function(bond) {
    console.log(bond)
    return bond.name
  }

  var formatResult = function(bond) {
    return '<div class="select2-user-result">' + bond.name + '</div>'
  }

  var initSelection = function(elem, cb) {
    console.log(elem)
    return elem
  }

    $('.select2').select2({
      placeholder: "Policy Name",
      minimumInputLength: 3,
      multiple: false,
      quietMillis: 100,
      ajax: {
        url: "http://localhost:3000/search",
        dataType: 'json',
        type: 'POST',
        data: function(term, page) {
          return {
            search: term,
            page: page || 1
          }
        },
        results: function(bond, page) {
          return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
        }
      },
      formatResult: formatResult,
      formatSelection: formatSelection,
      initSelection: initSelection
    })
})

Ответ JSON

{
  error: null,
  results: [
    {
      name: 'Some Name',
      _id: 'Some Id'
    },
    {
      name: 'Some Name',
      _id: 'Some Id'
    }
  ]
}

Кажется, что все в порядке, но я не могу на самом деле выбрать ответ и ввести его в поле. Есть ли проблема в моем коде?

Ответ 1

После просмотра еще одного ответа казалось бы, мне нужно также пройти поле id с каждым вызовом, иначе он отключит ввод.

Пример кода, который его исправил:

$('.select2').select2({
  placeholder: "Policy Name",
  minimumInputLength: 3,
  multiple: false,
  quietMillis: 100,
  id: function(bond){ return bond._id; },
  ajax: {
    url: "http://localhost:3000/search",
    dataType: 'json',
    type: 'POST',
    data: function(term, page) {
      return {
        search: term,
        page: page || 1
      }
    },
    results: function(bond, page) {
      return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
    }
  },
  formatResult: formatResult,
  formatSelection: formatSelection,
  initSelection: initSelection
})

Изменить

Так как это продолжается, то я немного поразмышляю. Метод .select2() ожидает уникальное поле id для всех результатов. К счастью, есть обходной путь. Опция id принимает такую ​​функцию:

function( <INDIVIDUAL_RESULT> ) {
  // Expects you to return a unique identifier.
  // Ideally this should be from the results of the $.ajax() call. 
}

Поскольку мой уникальный идентификатор был <RESULT>._id, я просто return <RESULT>._id;

Ответ 2

Дело в том, что для данных JSON требуется свойство "id". Нет необходимости в

id: function (bond) {return bond._id; }

Если у данных нет идентификатора для себя, вы можете добавить его с помощью функции processResults, как здесь.

        $(YOUR FIELD).select2({
            placeholder: "Start typing...",
            ajax: {
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "YOUR API ENDPOINT",
                dataType: 'json',
                data: 
                    function (params) {
                        return JSON.stringify({ username: params.term });
                },
                processResults: function (data, page) {

                    var results = [];

                    $.each(JSON.parse(data.d), function (i, v) {
                        var o = {};
                        o.id = v.key;
                        o.name = v.displayName;
                        o.value = v.key;
                        results.push(o);
                    })

                    return {
                        results: results
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup;},
            minimumInputLength: 1,
            templateResult: function (people) {
                if (people.loading)
                    return people.text;

                var markup = '<option value="' + people.value + '">' + people.name + '</option>';

                return markup;
            },
            templateSelection: function (people) { return people.value || people.text }

        });    

Ответ 3

Также будьте осторожны с корпусом. Я использовал Id, но select2 ожидает Id. Могли бы сэкономить время.

Ответ 4

Как Dropped.on.Caprica сказал: Каждому элементу результата нужен уникальный идентификатор.

Поэтому просто присвойте каждому результату id уникальный номер:

$('#searchDriver').select2({
    ajax: {
       dataType: 'json',
       delay: 250,
       cache: true,
       url: '/users/search',
       processResults: function (data, params) {
           //data is an array of results
           data.forEach(function (d, i) {
               //Just assign a unique number or your own unique id
               d.id = i; // or e.id = e.userId;
           })

           return {
               results: data
           };
       },
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

Ответ 5

У меня много проблем относительно следующей ошибки Параметр 'ajax' не разрешен для Select2

В моем случае появляется для выбора, когда вы используете select2 version 3.5, Поэтому вы должны перейти на версию 4.0, и вам не понадобится скрытый ввод, прикрепленный к вашему выбору

Ответ 6

введите описание изображения здесь

Вы можете вызвать выбор опции (в этом случае первый), открыв элемент select2 программно, а затем вызывая нажатие return.

var e = jQuery.Event('keydown');
e.which = 13;

$('.offer_checkout_page_link select').select2('open');
$('.offer_checkout_page_link .select2-selection').trigger(e);

Это будет "установить" вариант, как если бы вы нажали на него. Вы можете изменить это, чтобы выбрать конкретную опцию, вызывая соответствующее количество down нажатий клавиш перед запуском return.

Кажется, что если вы нажимаете (или в этом случае нажимаете enter), чтобы выбрать параметр, элемент выбора добавляется к элементу select. Вы заметите, что при первой загрузке страницы select2 элементы выбора не имеют дочерних элементов option. Вот почему другие решения предлагают добавить элемент option с помощью jQuery и затем выбрать его.