JS select2 контроль заполнения

Question

В проекте использую библиотеку select2 (https://select2.org/), стоит две задачи:

Отслеживать ввод пользователя посимвольно (js-example-basic-single)
На основании введенных данных (п.1) обновлять список option (на основании запроса к онлайн сервису, эта часть в проекте уже реализована)

Какое событие в select2 отслеживает ввод символов (по аналогии addEventListener('input')). Как динамически добавлять в select2 новые значения

Answer 1

Если я правильно вас понял, это то что вам нужно

        $('.js-example-basic-multiple').select2();
        $(".js-example-basic-multiple").on("select2:open", function() {
            $(".select2-search__field").on("input", function(e) {
              let value = e.target.value;
              console.log("Ввод пользователя:", value);
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

    <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
    </select>

UPD: Также при закрытие можно добавить

$(".js-example-basic-multiple").on("select2:close", function () {
  $(".select2-search__field").off("input");
});

По поводу массива - сложно реализовать без конкретного примера и более детального объяснения

const someArr = ['I', 'love', 'JS'];

$('.js-example-basic-multiple').select2({
    tags: true
});

$(".js-example-basic-multiple").on("select2:open", function () {
    $(".select2-search__field").on("input", function (e) {
        let value = e.target.value;
        console.log("Ввод пользователя:", value);

        if (value.toLowerCase() === 'gogi') {
            $('.js-example-basic-multiple').empty().select2({
                data: someArr
            });
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

    <select class="js-example-basic-multiple" name="states[]" multiple="multiple" style="width: 100%;">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
     </select>

При вводе слова gogi подгружаются значения с массива someArr;
.empty() - тут мы очищаем значение;
.select2({data: someArr}) тут добавляем новые;

Надеюсь вас правильно понял

БЛОГ НА HUSL

JS select2 контроль заполнения

Ответы (1 шт):