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

【问题标题】：How to remove focus from one magicsuggest component and set focus on second magicsuggest component如何从一个 magicsuggest 组件中移除焦点并将焦点设置在第二个 magicsuggest 组件上
【发布时间】：2015-10-12 10:19:26
【问题描述】：

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

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

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

【问题讨论】：

设置焦点可以使用 myCustomId2.input.focus();我发现有一个类，即 .ms-ctn-focus，它为 megicSuggest 提供了边框，因此您可以在更改事件时删除该类
除上述之外，我还为您准备了提琴手链接，但删除类逻辑需要改进。 jsfiddle.net/Kpz6y/36
@SanjayBhardwaj 成功了：D，非常感谢
很高兴知道。也谢谢。

标签： javascript jquery magicsuggest

【解决方案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']);
});

【讨论】：