Cloning a selectize input.

[jayalfredprufrock]

I'm in the process of swapping out select2 with selectize on an application and have run in to a slight hiccup that I'm not sure how to handle.

I've written some javascript that allows me to easily add new rows of one or more inputs. So for example, I might have a row that contains first name, last name, and user type with a button on the far end that allows users to add multiple people. With select2, I simply cloned the row, discarded the initialized select2 instance/content, and then reinitialized the select element with select2. Since selectize doesn't keep the original select dom element in tact, this solution is no longer possible. Furthermore, I don't see any exposed methods that allow you to grab all the options or to clone an existing selectized input, so I'm not sure of the best way to go about getting this functionality back in place.

I know that selectize provides tagging support for the multiple selection use case, but that's not always desirable. I'm sure I can hack things together, but I was hoping that somebody might suggest a clean solution or a small addition to the API that would make this particular use case easier.

Thanks!

[brianreavis]

As of 0.8.1 (released just now), you can destroy Selectize and have it restore the original options. With that said, I think you could do this without having to destruct / re-construct. For example:

HTML:

<div class="person">
    <select>...</select>
</div>
<a class="create-person">New Person</a>

JS:

var setupRow = function(row) {
    $(row).find('select').selectize();
};

// create new rows from template
var $row_template = $('.person:last').clone();
$('.create-person').on('click', function() {
    var $row_last = $('.person:last');
    var $row_new  = $row_template.clone();
    $row_last.after($row_new);
    setupRow($row);
});

// initialize pre-existing rows
$.map($('.person'), setupRow);

[gunjanvarshney]

The method shown doesnt work entirely if the original combobox was already selectized which will is the case for me. What this method does is that it leaves the original code as is intact in the cloned (new) element. I am not able to figure out how to get rid of that. any suggestions