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

Question

I am using magicsuggest and have two select boxes as i have shown in image below, my problem is i am able to set focus on second maggicsuggest box with help of

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

but there is still blue border outside first selection box and i am not able to select value from second combo-box

my JavaScript is

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

for set focus you can use myCustomId2.input.focus(); and i have found there is a class i.e .ms-ctn-focus which give border to the megicSuggest so you can remove that class on change event — Sanjay Bhardwaj, Oct 12 '15 at 10:52
in addition to above, i've prepared fiddler link for you BUT removing class logic need to be improved. http://jsfiddle.net/Kpz6y/36/ — Sanjay Bhardwaj, Oct 12 '15 at 10:56

score 1 · Accepted Answer · edited Oct 15 '15 at 12:39

As explained in comment, here is the fiddler 'http://jsfiddle.net/Kpz6y/36/'

Design 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']);
});

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

1 Answers1