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]

👍

[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

[pedro380085]

Still not merged?

[TylerRick]

Just came across this as well... Without this feature, I would have to use select2 instead...

[cashlalala]

+1 never forget!

[dcangulo]

Why isn't this merged?

[prohtex]

Does anybody know the callback function for removing a newly added option? I thought it was create_option_clear but that isn't working for me...

[pangdaxing23]

This would be a great feature, please merge this.

[joshm1204]

What is the status of this feature? Would like it merged

[mcarpenterjr]

The general public feedback on this looks mostly positive, yet it's been hanging around for almost 7/8 years. Is there a specific reason Harvest doesn't want this merged?

[hrshtmims]

I believe they are dead.

[dangbert]

FYI if you don't want to download a fork of this library, this is a hacky workaround I did instead:
(note that "search-select" is the ID of my select element)

// https://harvesthq.github.io/chosen/options.html#triggered-events
// add a button to dropdown for users to use custom search strings
$("#search-select").on("chosen:no_results", function(evt, params) {
  let elem = $("#search-select").siblings(".chosen-container").find(".chosen-choices .search-field:last input");
  let text = elem.val().replace(/'/g, ""); // get search string user typed and remove all single quote characters
  text = `<button class="btn btn-success" onClick="addCustom('${text}')" style="height: 20px; font-size: 13px; padding: 1px 4px 1px 4px;">Use custom '${text}'</button>`;
  $("#search-select").siblings(".chosen-container").find(".no-results").html(text);
});

// add's a custom search string option to the dropdown (and selects it)
function addCustom(searchStr) {
  let arr = $("#search-select").val();
  $("#search-select").html($("#search-select").html() + "<option value='" + searchStr + "'>" + searchStr + "</option>");
  $("#search-select").val(arr.concat([searchStr])); // append to existing selected options
  $("#search-select").trigger("chosen:updated");
}

Here's what it looks like:
(note that I'm using bootstrap classes to style my button so yours may look different):

Another alternative, is to simply use the browser's native support for datalists

[z1ad]

Thanks @dangbert for sharing your solution - Ive made some minor tweaks to the UI and made it work with symbols/html.

// from: https://github.com/harvesthq/chosen/pull/166#issuecomment-692317968
$("select[multiple]").on("chosen:no_results", function() {
    var select = $(this);
    let search = select.siblings(".chosen-container").find(".chosen-choices .search-field:last input");
    let text = escapeHTML(search.val());
    // dont add if it already exists
    if (! select.find('option[value=' + escapeSelector(search.val()) + ']').length) {
        var btn = $('<li class="active-result highlighted">' + text + '</li>');
        btn.on("mousedown mouseup click", function(e) {
            let arr = select.val();
            select.html(select.html() + "<option value='" + text + "'>" + text + "</option>");
            select.val(arr.concat([text]));
            select.trigger("chosen:updated");
            search.focus();
            e.stopImmediatePropagation();
            return false;
        });
        search.on("keydown", function(e) {
            if (e.which == 13) {
                btn.click();
                return false;
            }
        });
        select.siblings(".chosen-container").find(".no-results").replaceWith(btn);
    } else {
        select.siblings(".chosen-container").find(".no-results").replaceWith('');
    }
}).on("change", function(e, params) {
    var select = $(this);
    if (params.deselected) {
        select.find('option[value=' + escapeSelector(params.deselected) + ']').first().remove();
        select.trigger("chosen:updated");
    }
});
function escapeHTML(html) {
    return html
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}
// from: https://stackoverflow.com/questions/739695/jquery-selector-value-escaping
function escapeSelector(string) {
    return string.replace(/([ !"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g,'\\$1');
}

[paytah232]

@z1ad Is there a way to modify this to work with chosen-select that is NOT a multiselect. My use case is I want to display a list of shelves the user can select from, but also give the option for them to type the name of a new shelf.

Also +1 for this feature to be merged!