jquery - Select2 使用 Ajax 在运行时更改颜色

Question

我正在使用 select2使用 Ajax，效果很好。但我不能做以下事情:

我有一个 php 服务器，当我使用 Select2(通过 Ajax)搜索时，它会返回值。在正常情况下，Select2 以黑色打印所有搜索，但我希望将结果与其他局部变量进行比较，并以蓝色打印其中一些(如果值是新的，以蓝色打印就足够了)。

In normal condition它以黑色打印，但我希望以蓝色打印一些文字。

我的 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)'
            };
        },
    });

您对此有什么想法吗？

例如当值是新的时，以蓝色打印。

附注:it remains black

Answer 1

您可以委托(delegate)输入 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>