Как заставить каждый метод работать с несколькими входами, используя MagicSuggest?

Question

У меня есть 3 поля, над которыми будет действовать MagicSuggest. Я установил его так, чтобы при наличии значения на входе класс с именем "fill" активировался и оставлял метку над соответствующим входом. Проблема в том, что этот "заполненный" класс добавляется ко всем другим входным данным, используя MagicSuggest. Я просто хочу это для индивидуального вклада.

Вот ручка, которая содержит мою проблему.

Что я пробовал:

//Try #1
$(maa, baa, laa).each(function(){
  $(maa, baa, laa).on('selectionchange', function(e, m){
    var this = $(this).closest('.ms-ctn');
    $(this).addClass('filled');
  });
});

//Try #2
$(maa).on('selectionchange', function (e, m) {
  $('.ms-sel-ctn').each(function(){
    $(this).closest('.ms-ctn').addClass('filled');
  });
});

//Try #3
$(maa).on('focus', function (c) {
  $('ms-sel-ctn').closest('.ms-ctn').addClass('filled');
});

//Try #4
$('.magsug').each(function () {
  var xxx = $(this).magicSuggest({});
  $(xxx).on('selectionchange', function(event, combo, selection) {
    $('.ms-sel-ctn').closest('.ms-ctn').addClass('filled');
  });
});

//Try #5
$('.magsug').each(function () {
  var ms = $(this).magicSuggest({});
  $(ms).on('selectionchange', function (e, m) {
    $('.ms-sel-ctn').each(function(){
      $(this).closest('.ms-ctn').addClass('filled');
    });
  });
});

Я нашел похожий вопрос на странице вопросов в github и попытался реализовать его (Попробуйте №5), но у меня это не сработало. Я изучаю JavaScript, извините за любые очевидные ошибки. Спасибо за помощь.

Answer 1

Вы изменяете все поля ввода одновременно, поэтому у вас есть проблема.

Вы должны использовать события и методы, предоставляемые компонентом:

• on('selectionchange') срабатывает при изменении выбора
• ms.getValue() возвращает значение, содержащееся в компоненте.

В любом случае, вот ваша ручка исправлена:

http://codepen.io/bubbliscious/pen/fecji

ура