Select2 изменить цвет во время выполнения с Ajax - PullRequest
Новая
       7

Select2 изменить цвет во время выполнения с Ajax

0 голосов
/ 08 сентября 2018

Я использую select2 с Ajax, и он работает очень хорошо. Но я не могу сделать следующее:

У меня есть php-сервер, который при поиске с помощью Select2 (by Ajax) возвращает значения. В нормальном состоянии Select2 печатает все результаты поиска в черном цвете, но я хочу сравнить результат с другими локальными переменными и напечатать некоторые из них синим цветом (достаточно, чтобы новое значение было напечатано синим цветом).

В нормальном состоянии печатается на черном, но я хочу напечатать некоторые слова синим.

Мой код Select2 Ajax: 

$("#idSelectorTypology").select2({
        cache: true,
        tags: true,
        tokenSeparators: [','],
        ajax: {
            url: './../../back-end/switch-ajax-listening/switch-ajax-listening.php',
            type: "post",
            dataType: 'json',
            delay: 250,
            data: function (params)
            {
                return {
                    searchTerm: params.term, // search term
                    actionId: "getSelector",
                    jsonField: "idSelectorTypology"
                };
            },
            processResults: function (response)
            {
                return {
                    results: response,
                    id: response.term,
                    text: response.term + " (new)",
                    newOption: true
                };
            },
        },
        createTag: function (params)
        {
            var term = $.trim(params.term);

            if(term==="-")
            {
                return {
                    id: term,
                    text:term,
                };
            }


            if (term === '')
            {
                return null;
            }
           //console.log(term.length);
            if(term.length>50)
            {
                alertError("The typology must be less than 50 char");
                return null;
            }
            return {
                id: term,
                text: term + ' (new)'
            };
        },
    });

У вас есть идеи сделать это?

Например, когда значение новое, для печати синим цветом.

пс: остается черным

1 Ответ

0 голосов
/ 08 сентября 2018

Вы можете делегировать событие ввода для ввода select2-search__field : 

$(document).on('input', '.select2-search__field', function(e) {
    if ($(this).closest('.select2-container').find('li:contains("'+ this.value + ' (new tag)")').length > 0) {
        $(this).addClass('blueColor');
    } else {
        $(this).removeClass('blueColor');
    }
})


$(".js-example-tags").select2({
    tags: true,
    createTag: function (params) {
        var term = $.trim(params.term);

        if (term === '') {
            return null;
        }
        return {
            id: term,
            text: term + ' (new tag)',  // add text....
            newTag: true // add additional parameters
        }
    }
}).on('change select2:close', function(e) {
    $(this).next('.select2-container').find('.select2-selection__rendered').text(function(idx, txt) {
        if (txt.indexOf(' (new tag)') != -1) {
            $(this).addClass('blueColor');
        }
        return txt.replace(' (new tag)', '');
    })
});
$(document).on('input', '.select2-search__field', function(e) {
    if ($(this).closest('.select2-container').find('li:contains("'+ this.value + ' (new tag)")').length > 0) {
        $(this).addClass('blueColor');
    } else {
        $(this).removeClass('blueColor');
    }
})
.js-example-tags {
    width: 100%;
}
.blueColor {
    color: blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="form-control js-example-tags">
    <option selected="selected">black 1</option>
    <option>white 2</option>
    <option>white 3</option>
    <option>black 4</option>
</select>
...