如何使用MagicSuggest让每个方法都能处理多个输入?

Question

我有3个字段，MagicSuggest将会起作用。我设置了它，以便当输入中有一个值时，一个名为"填充"的类将激活并在其各自的输入上方留下标签。问题是，这个"填充"类被添加到使用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

欢呼