selectize.js on dynamically created select element

Question

I am using selectize.js in two separate ways. First, I have select elements that are in the html and selectize objects are created at page load. These elements behave correctly. However, I use jquery to dynamically create new select elements (with options) and then attempt to instantiate selectize on them.

When I do this, these elements will not allow me to type an input into the select element but the dropdown still works.

Answer 1

Create an element, append it and call the plugin on the element.

 $(document).ready(function(){ var options = { delimiter: ',', persist: false, create: function(input) { return { value: input, text: input } } }; $('#input-tags').selectize(options); $('#input-tags2').selectize(options); //Creating new selectize var newinput = $("<input id='input-tags3'/>"); $("body").append(newinput); newinput.selectize(options) }); 

 <link href="https://selectize.github.io/selectize.js/css/selectize.default.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="https://selectize.github.io/selectize.js/js/selectize.js"></script> <input id="input-tags" value="a,b"> <input id="input-tags2" value="a,b">