magicsuggest | Multiple Selection Combo Box using Bootstrap | Frontend Framework library

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

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

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

HTML

I have a style.scss file where i have imported bunch of other files like

I am using magic suggest component and have noticed very weird behavior as soon as I start typing without caps lock it applies suggestions just fine, however when I am pressing shift and continue typing suggestions never get applied until the release of shift button and pressing something else. Does anyone have a clue of what's going on and how i can handle this properly.

I've been working with Magicsuggest for a couple of days and I'm trying to change the placeholder text so the Magicsuggest acts like single selection.

I have the first one:

HTML

So basically, I'm trying to make a hybrid structure for an MVC project. The frontend framework will be managed by Webpack and VueJS. However, after weeks of tinkering and picking up proper Webpack knowledge together with Vue, i've been unable to achieve what I want to do so.

So right above is the project structure, but specifically the webpack layer. The webpack folder will first be packed by Webpack into the wwwroot/dist folder, which would end up like this;

From here, we'll be able to import the bundles into the main layout of the MVC's view which we can then apply Vue inline to each and every view. The goal in doing this is such that we can first,

1. Bundle styles and commonly used js libraries with Webpack
2. Be able to utilize Vue and Vue's components while being able to create a chunk structure (0.js, 1, 2 ....)
3. Because of 2, we'll be able to lean abit towards CSR (Client Side Rendering).

Here's my webpack.config.js for reference.

I have tried asking this question directly on github but there does not seem to be much movement in this project anymore. It would be great if someone on SO has an idea. Is it possible to return a promise in the data function? I have tried the following and it does not seem to work. The issue is that I am trying to make an ajax call within the data-function, which expects a result/data array. Of course I cannot do this when making an asynchronous ajax call.