Bootstrap 4 Select2 Multiple не может печатать в режиме реального времени - PullRequest
Новая
       53

Bootstrap 4 Select2 Multiple не может печатать в режиме реального времени

0 голосов
/ 08 июля 2019

Я пытаюсь использовать select2 live search, используя jquery ajax.При использовании выберите без нескольких, умеет печатать.Но при использовании множественного числа невозможно набрать.

Без множественного числа

С множественным числом

Я уже искал ресурс по этому поводу, но ни один из них не может решить мою проблему 

//form select2
<div class="form-row">
    <div class="col-md-12 mb-3">
        <div class="form-group @error('tag_tech') has-danger @enderror" id="tags">
            <label class="form-control-label">Tag Technology</label>
            <select name="tag_tech[]" id="tag_tech" multiple="multiple" class="form-control @error('tag_tech') is-invalid @enderror">
            </select>
            @error('tag_tech')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>
</div>

//jsnya
<script>
$(function() {
    getTagTechnology();
});
</script>
<script>
function getTagTechnology()
{
    function ResultTemplater(item) {
        return item.nama || item.text;
    }

    function SelectionTemplater(item) {
        if (typeof item.nama !== 'undefined') {
            return ResultTemplater(item);
        }

        return item.nama || item.text
    }

    const el = $('#tag_tech');

    const select2 = el.select2({
        width: '100%',
        placeholder: el.attr('placeholder'),
        multiple: true,
        ajax: {
            url: '{{route("portfolio.tag-tech")}}',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    q: params.term, // search term
                    page: params.page,
                    limit: 10
                };
            },
            processResults: (data, params) => {
            params.page = params.page || 1
                return {
                    results: data.items,
                    pagination: {
                        more: params.page * data.limit < data.total_count
                    }
                };
            },
            transport: function (params, success, failure) {
                const $request = $.ajax(params);

                $request.then(success);
                $request.fail(failure);

                return $request;
            },
            cache: true
        },
        minimumInputLength: 1,
        templateResult: ResultTemplater,
        templateSelection: SelectionTemplater
    });
}
</script>

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

...