MagicSuggest: Get length of selections on blur

Question

I am using MagicSuggest and I need to get the length of the selections on a blur event. My code works great if I add a new selection via the ENTER key but does not work if I choose an existing selection from the list.

Use cases

if User chooses suggestions via the ENTER key, length = 1 - Correct
if User chooses suggestions via the MOUSE click, length = 0 - Incorrect, should be 1

JSfiddle https://jsfiddle.net/a1ejqtae/7/

HTML

<form action="">
  <label for="keyword">Keywords</label>
  <input type="text" id="keywords">
</form>

JS

$('form input').on('blur', function(){

var selectionLength = $('form .ms-sel-item').length;
$('.selection-name').text(selectionLength);
console.log('Selection is ' + selectionLength);

if( selectionLength > 0 ){
console.log('Selection is greater than 0');
}

});

PS Does anyone know what happened to this plugin, the github page is still running but the site with all documentation and examples is down - http://nicolasbize.com/magicsuggest/doc.html. Thank goodness for wayback machine.

alireza · Accepted Answer · 2017-03-02T23:07:42.427

1

I tested code below in your jsfiddle and it worked fine:

var labelName = $('label').text();
console.log('label = ' + labelName);

$('#keywords').magicSuggest({
  hideTrigger: true,
  placeholder: 'Start typing for keyword suggestions',
  useZebraStyle: true,
  data: ["banshee", "fargo", "house", "csi", "ncis"],
  method: 'get'
});

var update = function (){
    var selectionLength = $('form .ms-sel-item').length;
  $('.selection-name').text(selectionLength);
  console.log('Selection is ' + selectionLength);
}

$('form input').on('blur', function(){

 update();

});
$(window).on('keyup', function(e){
 if(e.keyCode === 13){

  update();
  $(this).blur();
 }

});
$(window).on('click', function(e){
  update();
  $(this).blur();
});

Let me know if there was any issue. I hope it helps.

edited Mar 02 '17 at 23:07

answered Mar 02 '17 at 22:55

alireza

518
5
15

Thanks but I'm still getting the same result on mouse click. https://jsfiddle.net/r87zvxy5/1/ – Clinton Green Mar 02 '17 at 22:58
@ClintonGreen Sorry, I updated my answer. It should work with click too. – alireza Mar 02 '17 at 23:08
1

Thanks for the help :) – Clinton Green Mar 03 '17 at 00:27

vishwajeet saini · Answer 2 · 2020-08-04T12:17:39.580

1

$(ms).on('blur', function(c,e){
    var selecteion = e.getSelection();
    if(selecteion[0]){ 
        console.log(selecteion[0]);
    }
});

edited Aug 04 '20 at 12:17

answered Nov 30 '18 at 06:57

vishwajeet saini

11
3

MagicSuggest: Get length of selections on blur

2 Answers2