Selectize.js

Question

我正在使用 selectize 并且我已经对其进行了设置，以便用户可以 select 仅从一系列选项中选择一个，并且如果他愿意，他可以进行新的输入出色地。我想这样做，如果用户 select 是选项之一，输入项会得到一个 class，它会设置样式，因为 selectize 设置 select 启用多个选项时编辑项目。

但是如果用户输入自己的输入，输入将没有样式，因此输入的输入和 selected 的输入会有所不同。但我不确定该怎么做？

这是我的脚本：

$('#engagement_question').selectize({
    persist: false,
    maxItems: 1,
    options: items,
    labelField: "item",
    valueField: "item",
    sortField: 'item',
    searchField: 'item',
    create: true,
    render: {
      option_create: function(data, escape) {
        return '<div class="create">Nytt inlegg<strong> ' + escape(data.input) + '</strong>&hellip;</div>';
      }
    },
});

我尝试过使用事件 api，但没有成功：

var addItemClass = function() {
    console.log('entered');
    $('.item').addClass( "item-background" );
};

var removeItemClass = function() {
    console.log('entered');
    $('.item').removeClass( "item-background" );
};

var selectize = $select[0].selectize;
selectize.on('item_add', addItemClass);
selectize.on('option_add', removeItemClass);

我们的想法是添加一个 class，如果它是从选项中 select 编辑的，它将为输入提供背景，如果输入是新的，则将其删除。但是当它进入函数 removeItemClass 时，它也立即进入 addItemClass 函数。我怎样才能阻止它？

更新

最后我用这个让它按照我想要的方式工作：

onChange: function(value) {
      var unique = true;

      for(var i = 0; i < items.length; i++) {
        if(items[i].item == value) {
          unique = false;
          break;
        }
      }

      if(value.length > 0 && unique) {
        $question.next('.selectize-control').find('.selectize-input').addClass('user-created');
      }
    },

Answer 1

removeItemClass 是从 selectize.js 内部触发的。在这里，我们检查了最后一个 .item text 是否与 items array 中的现有元素不匹配，而不是 background-image 中的 gradient 是否设置为 none 而我们的 item-background Class 已应用

JSFiddle

JS:

 var items = [
        { id: 1, item: 'Spectrometer' },
        { id: 2, item: 'Star Chart' },
        { id: 3, item: 'Electrical Tape' }
        ];

            var $select = $('#engagement_question').selectize({
                persist: false,
                maxItems: 3,
                options: items,
                labelField: "item",
                valueField: "item",
                sortField: 'item',
                searchField: 'item',
                create: true,
                render: {
                    option_create: function (data, escape) {
                        return '<div class="create">Nytt inlegg<strong> ' + escape(data.input) + '</strong>&hellip;</div>';
                    }
                },
            });
            var addItemClass = function () {
                console.log('entered1');
                var input = $.map(items, function (element, index) {
                    if (element.item == $('.item:last').text())
                        return element;
                    else
                        return null;
                });
                if (input.length == 0)
                {
                    $('.item:last').css('background-image', 'none');
                }
                $('.item:last').addClass("item-background");

            };

            var removeItemClass = function () {
                console.log('entered2');
                $('.item:last').removeClass("item-background");
                //$('.item').css('background-image', 'none');
            };

            var selectize = $select[0].selectize;
            selectize.on('item_add', addItemClass);
            selectize.on('option_add', removeItemClass);

CSS

.item-background {
            background-color:#000!important;
        }

HTML

<select id="engagement_question" multiple>

</select>

Selectize.js - 停止活动 item_add

Selectize.js - stop event item_add

javascript

jquery