select2 разграничение свободных текстовых ответов (теги: true) - PullRequest
Новая
       11

select2 разграничение свободных текстовых ответов (теги: true)

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

Я использую select2 в своем приложении с настройкой tags: true

На изображении ниже слово ячейки является новой опцией (т.е. нечасть предварительно заполненного набора опций выбора).

enter image description here

Мне интересно, как люди реализуют лучший способ дифференциации этого Ячейки Опция, представляемая в select, является новой опцией вместо текущей опции?

Я думал об этом, используя пользовательские функции для опций createTagи templateResult

function templateResult(el) {
    return 'newTag' in el ? el.text + ' (new tag)' : el.text;
}

function createTag(params) {
    var term = $.trim(params.term);

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

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

, чтобы получить что-то вроде:

enter image description here

Кто-нибудь придумалчто-то лучше?

1 Ответ

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

Достаточно немного изменить свой createTag : 

$(".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', function(e) {
    $(this).next('.select2-container').find('li:contains(" (new tag)")').text(function(idx, txt) {
        return txt.replace(' (new tag)', '');
    })
});
.js-example-tags {
    width: 100%;
}
<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" multiple>
    <option selected="selected">orange</option>
    <option>white</option>
    <option>purple</option>
</select>
...