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

时间:2015-10-12 10:19:27

标签: javascript jquery magicsuggest

我正在使用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']);

enter image description here

1 个答案:

答案 0 :(得分: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']);
});