Как скрыть какой-то текст в опциях в выпадающем списке select2? - PullRequest
Новая
       11

Как скрыть какой-то текст в опциях в выпадающем списке select2?

0 голосов
/ 26 февраля 2020

У меня есть список продуктов в выпадающем списке select2 следующим образом. 

<option>Product A [Barcode]</option>
<option>Product A [Barcode]</option>
<option>Product A [Barcode]</option>
<option>Product A [Barcode]</option>

Теперь я хочу скрыть штрих-код из опции, но хочу, чтобы поиск находил продукт, если введен штрих-код. Я пытался 

<option>Product A <span style='display:none;'>[Barcode]</span></option>

Но безуспешно. Не смог найти ответ в документации. Пожалуйста, помогите.

1 Ответ

0 голосов
/ 26 февраля 2020

Элемент Option не может иметь дочерних элементов внутри, поэтому вы можете перемещать значения штрих-кода в атрибуте 'value' параметра. Затем определите функцию выбора select2 для поиска по значениям параметра.

https://select2.org/searching

$('#mySelect').select2({
  matcher: function(params, data) {
    // If there are no search terms, return all of the data
    if ($.trim(params.term) === '') { return data; }
    // Do not display the item if there is no 'text' property
    if (typeof data.text === 'undefined') { return null; }

    // check for both value and text
    var searchTarget = params.term.toLowerCase();
    if (data.text.toLowerCase().indexOf(searchTarget) > -1 || data.id.toLowerCase().indexOf(searchTarget) > -1) {
        return $.extend({}, data, true);
    }
    //
    return null;
}
});

И результат примерно такой:

https://jsfiddle.net/scarabs/canrx12k/

...