javascript - 如何从一个 magicsuggest 组件中移除焦点并将焦点设置在第二个 magicsuggest 组件上

Question

我正在使用 magicsuggest 并有两个选择框，如下图所示，我的问题是我能够在

的帮助下将焦点集中在第二个 magicsuggest 框上

$(myCustomId).blur(); $('#ms2').attr("tabindex",-1).focus();

但是第一个选择框外面仍然有蓝色边框，我无法从第二个组合框中选择值

我的 JavaScript 是

var myCustomId = $("#ms1").magicSuggest({
maxSelection: 1,
allowFreeEntries: true,
autoSelect: true,
expandOnFocus: true,
useTabKey: true
});
myCustomId.setData(['Paris', 'New York', 'Gotham']);


$(myCustomId).on('blur', function(c){
});

$(myCustomId).on('selectionchange', function(e,m){ 
  $(myCustomId).blur();
  $('#ms2').attr("tabindex",-1).focus();
});



var myCustomId2 = $("#ms2").magicSuggest({
  maxSelection: 1,
  allowFreeEntries: true,
  autoSelect: true,
  expandOnFocus: true,
  useTabKey: true
});
myCustomId2.setData(['Paris', 'New York', 'Gotham']);

Answer 1

正如评论中所解释的，这是 fiddle 手'http://jsfiddle.net/Kpz6y/36/ '

设计 HTML

    <form action="subscribe.php" method="post">
    <div class="form-group">
        <div class="suggest-tag"></div>
    </div>
    <div class="form-group">
        <div class="suggest-tag2"></div>
    </div> </form>

Javascript

$(function() {
  var myCustomId = $(".suggest-tag").magicSuggest({
maxSelection: 1,
allowFreeEntries: true,
autoSelect: true,
expandOnFocus: true,
useTabKey: true
});
myCustomId.setData(['Paris', 'New York', 'Gotham']);


$(myCustomId).on('blur', function(c){
});

$(myCustomId).on('selectionchange', function(e,m){ 
  myCustomId.input.blur();
  $($('.ms-ctn')[0]).removeClass('ms-ctn-focus')
  myCustomId2.input.focus();
});   

var myCustomId2 = $(".suggest-tag2").magicSuggest({
  maxSelection: 1,
  allowFreeEntries: true,
  autoSelect: true,
  expandOnFocus: true,
  useTabKey: true
});
myCustomId2.setData(['Paris', 'New York', 'Gotham']);
});