Selectize.js - イベントを停止するitem_add

Question

私はselectizeを使用しています。ユーザーがオプションの配列から1つだけを選択できるように設定しています。希望する場合は、新しい入力もできます。ユーザーがオプションの1つを選択すると、複数のオプションが有効になっているときに選択されたアイテムのスタイルが選択されるので、入力アイテムはクラスを作成します。

しかし、ユーザーがそれ自身の入力に入った場合、入力は何のスタイルを取得しないだろう、そう入力された入力と、選択した入力に差があるでしょう。しかし、私はそれを行う方法がわかりません？

これは私のスクリプトです：

$('#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); 

アイデアはANに背景を与えるクラスを追加しましたオプションから選択された場合は入力し、新規入力された場合は削除します。しかし、それが機能removeItemClassに入ると、immedialyは関数にも入ります。 どうすればいいですか？

更新

最後に私はそれは私がそれを望んでいたように動作させるために、これを使用：

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から発射されます。

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); 

：ここでは、 noneに gradient設定されていると私たちの item-backgroundクラスが

JSFiddle

JSが適用されbackground-imageよりitems arrayにおける既存の要素の最後の.item textない一致した場合にチェック

CSS

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

HTML

<select id="engagement_question" multiple> 

</select>