Feature: Option adding (with custom callback)

[koenpunt]

Option adding

You can specify a create_option option, which can be a boolean or callback function.

Example for allowing adding of new items:

$(function() {
  $(".chzn-select").chosen({
    create_option: true,
    // persistent_create_option decides if you can add any term, even if part
    // of the term is also found, or only unique, not overlapping terms
    persistent_create_option: true,
    // with the skip_no_results option you can disable the 'No results match..' 
    // message, which is somewhat redundant when option adding is enabled
    skip_no_results: true
  });
});

Or with a callback and an AJAX request to, for example, save the terms in your database:

$(function() {
  $(".chzn-select").chosen({
    create_option: function(term){
      var chosen = this;
      $.post('add_term.php', {term: term}, function(data){
        chosen.append_option({
          value: 'value-' + data.term,
          text: data.term
        });
      });
    }
  });
});

Custom text

Through the options it is also possible to customize the text used in the 'Add option' link, like so:

$(function() {
  $(".chzn-select").chosen({
    create_option_text: 'Create category'
  });
});

I'll try to keep my release up to date with harvesthq/master: https://github.com/koenpunt/chosen/releases

[marcusjames]

This is great! Would it be easy to make it so hitting the enter key also triggers the "add item" so you don't have to click the link? The enter key already works for selecting existing items from the list. Thanks!

[koenpunt]

That was in my case intentionally left out, so the user is really aware of adding new items. But maybe I will add it as an extra option.

[zanematthew]

Any desire to bundle this with the jquery plugin?

[bewest]

I believe this is a good candidate for solving issue #5.

[koenpunt]

I also fixed some small things, and updated my first comment here with the correct usage examples.

Also the functionality in the prototype version now matches with the jquery version again.

[edrex]

+1 on UI +1 on code review

I'm using this branch on a site, hope it gets merged soon.

[matheo]

@harvesthq There's any idea if this will be merged?

I'm a third party developer of the Zikula Web Application Framework, and we're interested to include Chosen on the bundled libraries, but this feature is very useful and seems that there's no attention to this pull request.

Personally, I'm using @koenpunt's master branch because it does what I need at this moment, but will anybody review the quality of this PR (I can't because my JS skills are low) and include this in the main project?

This is a feature requested months ago by a ot of people, and would be good to know if someone will take care of this, or if end-users will have to choose between the main project or koenpunt's fork.

Thanks for the great job.

[sontek]

Is this going to be merged in? I need to dynamically create items in the list.

[bewest]

@matheo I performed a code review on several branches solving issue #5 and recommended this one, FWIW.

[sontek]

If this isn't a good patch that could be merged, just let me know why and I will make the changes needed, I really want this feature put into chosen.

[danbronsema]

+1 For getting this merged in. Would also be good to have option for enter key to triggers the "add item"

[amacneil]

This would be really helpful. Please merge!

[ixti]

This is really awesome feature, that chosen lack of.

[willdurand]

:+1:

[mikke123]

+1 for merging this into master

[gabrielbull]

Wants this as well

[kyriacos]

+1

[timoxley]

+1

[radomirml]

+!

[JCKodel]

There is a bug when a OnChange event is present for the tag. When creating a new option, the OnChange event must be triggered, because the selection was changed

    Chosen.prototype.select_append_option = function (options)
    {
        var option;
        option = $('<option />', options).attr('selected', 'selected');
        this.form_field_jq.append(option);
        this.form_field_jq.trigger("liszt:updated");
        this.form_field_jq.trigger("change"); // ADD THIS LINE TO FIRE THE CHANGE EVENT
        return this.search_field.trigger('focus');
    };

I needed the OnChange event to enable the submit button when a item is available in the chosen autocomplete (there was none, and I added one with the new create_option config)

[a-bastin]

+1 ! Great feature !

[tute]

+1

[oisinlavery]

+1

[abrambailey]

+1

[abrambailey]

@koenpunt Thanks so much for the awesome plugin. Can you please help me. I'd like to get the below code to trigger a change event even when a new business is typed in, and not selected from the autocomplete options. Cheers, Abran

$(function() { $("#dispenser_business_id").chosen({ create_option: true, persistent_create_option: true, create_option_text: 'Create New Business' }).change( function() {$('#myModal').modal({})}); });

[fson]

+1 This is a very useful feature. However adding options to multiple select seems to be broken at the moment. If you add a new item and then start to type in the name of the next one that text it is removed. Starting to type again brings it back to normal.

[fson]

The problem I reported seems to be fixed now. Works fine!

[koenpunt]

@funkdified To get back on you, you could use the callback:

$(function() {
   $("#dispenser_business_id").chosen({
      create_option: function(term) {
         this.append_option({
            value: term,
            text: term
         });
         $('#myModal').modal({});
      },
      persistent_create_option: true,
      create_option_text: 'Create New Business'
   });
});

[mikke123]

@koenpunt thanks for your changes... I didn't know if you already had option not to show "ADD" for items that are already in the list so I did my own version for jQuery - I hope somebody can integrate it with prototype if it's needed:

$(this.form_field).find('option').filter(function() { return ($(this).text() == terms); }).length == 0

That's the condition I've added in no_results method; i.e:

Chosen.prototype.no_results = function(terms) {
  var no_results_html;
  no_results_html = $('<li class="no-results">' + this.results_none_found + ' "<span></span>"</li>');
  no_results_html.find("span").first().html(terms);
  this.search_results.append(no_results_html);
  if (this.create_option && $(this.form_field).find('option').filter(function() { return ($(this).text() == terms); }).length == 0) { // added second condition
    return this.show_create_option(terms);
  }
};

[koenpunt]

@mikke123 Setting persistent_create_option to false or not supplying it al all should already take care of that.