How to create the function "create variant" onblur in the selected plugin?

Question

I use Koenpunt fork ", which allows me to use the create_option parameter in the configuration object.

It provides a convenient way for users to create items when they are not available in the selection window.

Now it works, forcing the user to click on the "create a new thing" link that appears in the field, but I would like him to automatically create these new parameters. Is it possible? Is there an event that I should trigger?

Answer 1

As I understand,

• You are trying to dynamically add parameters as you type in the SearchBox.
• Forwarder Koenpunt Chosen.jquery.js has this feature only by clicking the Add option link.

Let me keep it simple, running the Add Option link through a key event (for example: enter a key) would be better. After repeated attempts, I found the opt method from chosen.js

 Chosen.prototype.keydown_checker = function(evt){ ... ... } 

Add below script to your html file after jQuery initialization and Koenpunt chosen.js

 <script type="text/javascript"> Chosen.prototype.keydown_checker = function(evt) { if( event.which === 13) { $(this.form_field).append('<option>' + $(evt.target).val() + '</option>'); $(this.form_field).trigger('liszt:updated'); this.result_highlight = this.search_results.find('li.active-result').last(); return this.result_select(evt); } } </script> 

I am trying to create a JSFiddle, hopefully get it.

EDIT1: Atlast I got it in JSFIDDLE1

EDIT2: When trying to find a way for onBlur() , I got the following opt method

 AbstractChosen.prototype.input_blur = function(evt){ ... ... } 

A slight change in the above code:

 AbstractChosen.prototype.input_blur = function(evt) { $(this.form_field).append('<option>' + $(evt.target).val() + '</option>'); $(this.form_field).trigger('liszt:updated'); this.result_highlight = this.search_results.find('li.active-result').last(); return this.result_select(evt); } 

Relevant JSFiddle2 Hope you can find the differences in both scripts.

Answer 2

I suggest you take a look at selectize.js , it has the exact functionality you are looking for (i.e. creating an option on -blur).

Select2 is also an alternative, it also has the same tag functions that you expect (see the "Tag Support" section at the bottom of the demo).

Edit: Added Select2