Select2: custom matcher - поиск по массиву данных

Я борюсь с select2.

Учитывая этот пример данных json:

{"id":1,"text":"search term category","data":[{"Key":"catalog","Value":"search term catalog"},{"Key":"make","Value":"search term make"},{"Key":"model","Value":"search term model"}]}

Как я могу искать не только в поле "текст", но и во всех полях "значение" в массив данных?

Я читал о настраиваемый сопоставитель, но не мог заставить его работать и не мог найти пример, с которым я мог бы работать.

Надеюсь, вы поможете мне или предоставите образец.

Спасибо.

Обновлено: Fiddle: jsfiddle

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 499
1

Ответы 1

Вам нужно написать собственный сопоставитель, примеры представлены в select2 документы. Я изменил предоставленный ими пример, чтобы он мог сработать для вас.

function matchCustom(params, data) {
    // If there are no search terms, return all of the data
    if ($.trim(params.term) === '') {
      return data;
    }

    // `params.term` should be the term that is used for searching
    // `data.text` is the text that is displayed for the data object
    if (data.text.indexOf(params.term) > -1) {
      return data;
    }

    // checking if a value matches (my addition to their example)
    if (data.data.some(({Value}) => Value.includes(params.text)) {
      return data;
    }

    // Return `null` if the term should not be displayed
    return null;
}

$(".js-example-matcher").select2({
  matcher: matchCustom
});

Возможно, вам придется изменить мои дополнения, чтобы они соответствовали требованиям совместимости вашего браузера (например, я использую функции с жирной стрелкой, деструктуризацию объектов, String.prototype.includes и Array.prototype.some).

Благодарю. Но я не могу заставить детей отображаться в раскрывающемся списке select2, и поиск не работает. Смотрите мой пост выше для скрипки.

ratanmalko 26.04.2018 20:04

Боюсь, вы используете Select2 версии 3.x, которая, насколько я могу судить, не поддерживает то, что вам нужно. Однако версия 4.x. Вот модифицированная рабочий пример: jsfiddle.net/b85swr3b/2. (Я не уверен, почему вы изменили data.data.some на data.data.Key, но это неправильное изменение).

sushain97 26.04.2018 20:20

Другие вопросы по теме