How to allow free-hand tagging at chosen jQuery

Question

I've used chosen jQuery plugin for tagging with suggestion box. I want to creating new tag by user which isn't exist at suggestion box. For example, if user want to make a new tag like "Red", it should be created. But, that plugin don't allow to do that. I'm trying to follow their update on that issue but, I can't able to do it. How can I allow creating new tags for user?

My Fiddle

Not working scripts:

$(".chosen-select").trigger("chosen:updated");

possible duplicate of [allow new values with chosen.js multiple select](http://stackoverflow.com/questions/7385246/allow-new-values-with-chosen-js-multiple-select) — alex, Feb 02 '15 at 16:17

score 0 · Answer 1 · answered Feb 02 '15 at 16:24

Here's a basic example of how to do this.

HTML:

<input type="text" id="newTag"></input>
<button id="submitNewTag">Add new option</button>

Javascript:

$("#submitNewTag").on("click", function() {
    var newTag = $("#newTag").val();
    addNewOption(newTag);
});

function addNewOption(option) {
    $(".chosen-select").append("<option>" + option + "</option>");
    $(".chosen-select").trigger("chosen:updated");
}

Your problem seems to be that you don't know how to add a new option to the select list before triggering the update. This can be done by appending a new <option> to the <select> list with jQuery's .append() function.

In my example, when a user clicks the "Add new option" button, the contents of the input box will be added to the select list, and then the chosen select list will be updated.

How to allow free-hand tagging at chosen jQuery

1 Answers1