Dynamically add option to chosen select multiple JQuery plugin

Question

I want to add the text that a user inputs in the text field of a chosen select multiple input as an option, and automatically select it, all of this when the option doesn't exists, if the option exists, then I would like to select it. So far I have manage 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 users presses enter while the input field is in focus within the keydown_check function.

I have two problems:

• Top priority, when the user presses enter and has typed a substring of an option, the option won't get selected, but the substring text will be added and selected. Not what I want.

For instance: If I have the option "foo", and start typing "fo", chosen will mark the first option as candidate ("foo"), so if I press enter, it should be selected, but instead, what happens is that "fo" is added as an option and selected, when I actually wanted to select "foo".

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

How can I add a non existent option to chosen, without loosing all the original functionality?

• How can I access the select multiple field I initilized whith chosen inside the chosen plugin? As you can see in the code above, the id of the select multiple field is hardcoded. I want to do this to be able to refresh the select when the user adds a new option.

• The functionality that I'm looking for is very similar to the skills widget of linkedin

Thanks in advance!

Answer 1

You should try out the select2 plugin which is based off of chosen plugin but it works well with adding elements dynamically.

Heres the link: http://ivaynberg.github.com/select2/

Look at the example for auto-tokenization I think that might 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's 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 in async way and returns server's response in JSON format. In the controller I check if a tag exists otherwise I create it. In response I five "jsoned" tag object.

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 jquery chosen which takes text and create as option. In earlier version of jquery chosen have facility create option.

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 solution multiple select

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