Dynamically add option to selected multiple jQuery plugin

Question

I want to add text that the user enters into the text box of the selected selected multiple input as an option, and automatically selects it, all this, when the option does not exist, if the option exists, then I would like to select it. So far I have managed to do this:

Chosen.prototype.add_text_as_option = function () { $('#id_select').append( $('<option>') .html(this.search_field.val()) .attr('selected', 'selected') .attr('value', 0) ); $('#id_select').trigger("liszt:updated"); return false; }; 

I call this function whenever the user presses the enter button when the input field is in focus in the keydown_check function.

I have two problems:

• Priority, when the user presses the enter button and dials an option substring, the option will not be selected, but the substring text will be added and selected. Not what I want.

For example: if I have the option “foo” and start typing “fo”, the selected one will mark the first one (“foo”), so if I press enter, it should be selected, but instead, it happens that “fo” is added as option and is selected when I really wanted to select "foo".

If I select "foo" with a click, then everything works fine. The selected option is selected, and the substring text is accepted as part of the option.

How can I add an optional option for selection without losing all the original functions?

• How can I access the selected multiple fields that I initialized, selected inside the selected plugin? As you can see in the above code, the identifier of the selected multiple field is hard-coded. I want to do this to update the selection when the user adds a new option.

• The functionality I'm looking for is very similar to the linkedin skill widget

Thanks in advance!

Answer 1

You should try the select2 plugin based on the selected plugin, but it works well with adding elements dynamically.

Here is the link: http://ivaynberg.github.com/select2/

See an example of auto-tokenization. I think this may be what you are looking for.

Answer 2

I needed this today, so I wrote something like this:

 $(function() { // form id $('#newtag').alajax({ // data contains json_encoded array, sent from server success: function(data) { // this is missing in alajax plugin data = jQuery.parseJSON(data); // create new option for original select var opt = document.createElement("OPTION"); opt.value = data.id; opt.text = data.name; opt.selected = true; // check if the same value already exists var el = $('#tags option[value="' + opt.value + '"]'); if( !el.size() ) { // no? append it and update chosen-select field $('#tags').append( opt ).trigger("chosen:updated"); } else { // it does? check if it already selected if(!el[0].selected) { // adding already existent element in selection el[0].selected = true; $('#tags').trigger("chosen:updated"); } else { alert("Already selected and added."); } } } }) }); 

"#" newtag is a form, ".alajax" is a plugin that sends form data asynchronously and returns the server response in JSON format. In the controller, I check if the tag exists, otherwise I create it. In response, I have five "jsoned" tags.

Answer 3

just call it keyup_check keydown_check is called before the pressed letter is initialized, unlike keyup_check

Answer 4

I created a jsfiddle of the selected jquery that takes text and creates as an option. An earlier version of the selected jquery has the ability to create an object.

 create_option: true; persistent_create_option: true; skip_no_results: true; 

You can use this code:

 $('#id_select').chosen({ width: '100%', create_option: true, persistent_create_option: true, skip_no_results: true }); 

jsfiddle link: https://jsfiddle.net/n4nrqtek/

Answer 5

I found a multiple choice solution

 var str_array = ['css','html']; $("#id_select").val(str_array).trigger("chosen:updated");