Adding new values to chosen plugin

Hey there!

Chosen is a jQuery Plugin, which gives some beautifully looking multiple selects in your form. The select can have some options populated, and the user can select one or multiple of them.

Recently, while using this plugin, I wanted to allow the user to add his own values to the list dynamically. Currently, in case the value is not there in the result, a ‘No result found’ message is shown.

No result found text.

I googled for a solution, and got some tweaks. This is what I did to achieve.

In the source code (chosen.jquery.js), I made a slight modification to the keyup_checker function.

1. Go to case 13 option in the switch block. (13 is the keycode for ‘Enter’)

if (this.results_showing) {
 return this.result_select(evt);
 }

What it currently does is, it checks whether there is a result bound to the user input, if so, it returns it. If not, it does nothing.

So, we need to handle when this condition fails, i.e. when the user inputs a value, and it does not match any result.

2. This is the code to handle it.

$(this.form_field).append('<option>' + $(evt.target).val() + '</option>');
$(this.form_field).trigger('chosen:updated');
this.result_highlight = this.search_results.find('li.active-result').last();
return this.result_select(evt);

$(evt.target).val() has the user input value. You add it to the list. Then do a chosen:update trigger to update the list.

According to the docs(link),

If you need to update the options in your select field and want Chosen to pick up the changes, you’ll need to trigger the “chosen:updated” event on the field. Chosen will re-build itself based on the updated content.

Finally, you add it to the results and return it.

Your final code in case 13 looks like this:

case 13:
 evt.preventDefault();
 if (this.results_showing) {
   if (!this.is_multiple || this.result_highlight) {
     return this.result_select(evt);
   }
   $(this.form_field).append('<option>' + $(evt.target).val() + '</option>');
   $(this.form_field).trigger('chosen:updated');
   this.result_highlight = this.search_results.find('li.active-result').last();
   return this.result_select(evt);
  }
  break;

You can also modify the ‘No result text’ text to include your added functionality.

$("#your-element").chosen(
 {no_results_text: "No result found. Press enter to add "}
);

Modify the text message.

 

Voila! Your input is added!

That’s all about it! 🙂

Do leave a comment if you have better solution.

Cheers,

Aishwarya 🙂