Не удалось загрузить результаты Select2 Ajax

Всякий раз, когда я пытаюсь найти результат в моей панели поиска select2 ajax, я получаю следующее сообщение:

'The results could not be loaded'

HTML:

<select class = "js-data-example-ajax form-control" multiple = "multiple"></select>

Javascript:

$('select').each(function(idx, ele) {
            $(ele).select2({
                theme: 'bootstrap4',
                placeholder: ele.getAttribute('placeholder'),
                ajax: {
                    url: '/product/api/search',
                    dataType: 'json' },
                    type: 'GET',
            });
        });

Я думаю, что мои настройки Ajax неверны, не могли бы вы помочь?

если вы вызовете /product/api/search в браузере, вы получите действительный json для select2, например идентификатор и текст?

— 20.02.2019 00:14

также ваш скрипт ajax не завершен должным образом. Вам нужно переместить} из dataType в конце ajax

— 20.02.2019 00:16

@daremachine Да, он возвращает результаты в формате JSON, не могли бы вы дать мне ответ с правильным синтаксисом?

— 20.02.2019 00:19

посмотрите processResults в документе select2.org/источники данных/ajax

— 20.02.2019 00:23

ajax jquery-select2 ajaxform jquery-select2-4 ui-select2

20.02.2019 00:09

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

2 344

Ответы 1

Ваш код должен выглядеть так. Метод GET не требуется.

$('select').each(function(idx, ele) {
  $(ele).select2({
      ajax: {
        url: 'https://api.github.com/search/repositories',
        dataType: 'json'
        // Additional AJAX parameters
      }
   }
});

Также ваша проблема может заключаться в исходном формате json, потому что для select2 нужен собственный формат с results.

In order to accomplish this, Select2 expects a very specific data format. This format consists of a JSON object containing an array of objects keyed by the results key.

{
  "results": [
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
}

Также вы можете использовать данные processResults или преобразование в определенном формате.

Спасибо, я получаю результат в строке поиска, но поисковый запрос по определенному имени не работает? Что может быть причиной этого?

— 20.02.2019 00:56

что вы имеете в виду конкретное имя в запросе? у тебя нет запроса

— 20.02.2019 01:06

Например, у меня есть 10 результатов в json, если я ищу идентификатор 2 с текстом «Вариант 2», он не фильтруется к варианту 2. Я все равно увижу весь список.

— 20.02.2019 01:12

а ты ищешь в select2 или на стороне сервера? если вы хотите фильтровать на стороне сервера, вам нужно реализовать параметр q term. Я не могу вам помочь, потому что вы, вероятно, не знаете, что делаете. Прочтите документацию, как работать с ajax.

— 20.02.2019 02:03

20.02.2019 00:38