Кто знает хороший вариант Multi Select с возможностью вставки по делимитру?

Question

[harry999]

Добрый день, нужна ваша помощь!
Нужен Multi Select, с возможностью вставки по делимитру.
Пример:

<select multiple>
 <option value="1">Test</option>
 <option value="2">Test2</option>
 <option value="3">Test3</option>
</select>

И допустим я впишу в multiselect: "Test,Test2", и чтобы выбралось по делимитру "," - вот эти значения. Именно с текущим value (1,2).
Спасибо вам за помощь!

Comments

[N]

Не?

https://select2.org

[harry999]

N, там нету возможности чтобы при массовой вставки выбиралось именно то значение которое у меня есть в моем select, а выходит что создается новый option с value и соответственно текстом того что вставил, если к примеру я вставил "Test", то будет не-что такое:
<option value="Test">Test</option>

[N]

harry999, Ну там есть события...думаю, что можно на основе их допилить...
https://select2.org/programmatic-control/events

[harry999]

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

[N]

harry999, Ну если прям "по-деревянному", то может:
1. Заюзать событие change;
2. Иметь массив где-то отдельно со списком вариантов и ID'шников к ним;
3. При вставке этих вариаций каждый раз проверять наличие в том массиве и оставлять в select'е только то, что попало...+ заменять value...

[harry999]

N, опять же change, работает только если идет смена значения, но никак не вставка в select

[N]

harry999, Щас поглядел внимательнее...
https://select2.org/tagging
Тут есть возможность изменять логику так называемых "тегов" в данном случае...разве не получится совместить вместо change, то, что я выше описал?

[N]

Документация

Пример из доки

$('select').select2({
  createTag: function (params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }

    return {
      id: term,
      text: term,
      newTag: true // add additional parameters
    }
  }
});

[harry999]

N, не помогает даже если выставить чтобы постоянно возвращало null, в любом случае создается новый тег не смотря на его существование.
Код:

$('.select-2').select2({
            tags: true,
            tokenSeparators: [',', '\n', '\t'],
            formatNoMatches: function() {
                return '';
            },
            createTag: function (params) {
                return null;
            }
        });

[N]

harry999, Смотри ответ...

Answer 1

[N]

Допилишь?
Надо регистр не учитывать...ну может ещё какие проверки добавить...

Comments

[N]

На коленке написал...лишь бы доказать, что всё реально... :)

[harry999]

Спасибо, это действительно сработало, но щас не могу решить ошибку:

var keys = {"ok+scG8b08NfomCW4Q160JhpoTB8zY+ipTh+SAwLFJcVesYdiup36wRRin6f+2wYmdoWJKA/CRU1vox":684};

        $('.keys ').select2({
            tags: true,
            tokenSeparators: [','],
            createTag: function (params) {
                var term = $.trim(params.term);
                if (term === '') {
                    alert(1)
                    return null;
                }else if((term in keys)) {
                    alert(2)
                    return {
                        id: keys[term],
                        text: term
                    }
                }else{
                    alert(3)
                    return null;
                }
            }
        });

При поиске к примеру ok+scG8b08NfomCW4Q160JhpoTB8zY+ipTh+SAwLFJcVesYdiup36wRRin6f+2wYmdoWJKA/CRU1vox
выбивает 3 сценарий, почему так просходит, и как это можно исправить?

[N]

harry999, У тебя выше объявлена keys, а ниже проверяешь в partners_keys...

[harry999]

N, дело не в этом, опечатка..

[N]

harry999,

[N]

harry999, Как успехи? Работает же.

[harry999]

N, да работает! большое вам спасибо!