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

Question

我正在使用 magicsuggest 并有两个 select 框，如下图所示，我的问题是我可以在

的帮助下将焦点设置在第二个 maggicsuggest 框上

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

但第一个 selection 框外仍然有蓝色边框，我无法 select 第二个组合框

的值

我的 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

如评论中所述，这是提琴手“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']);
});

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

How to remove focus from one magicsuggest component and set focus on second magicsuggest component

javascript

jquery

magicsuggest