Selectize Example

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/css/selectize.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.11.0/js/standalone/selectize.js"></script>
<section class="demo" id="demo-single-item-select">
                <div class="header">
                    Single Item Select
                </div>
                <div class="sandbox">
                    <label for="select-beast">Beast:</label>
                    <select id="select-beast" class="demo-default" placeholder="create a person by typing...">
                    </select>
                    
                </div>
                         <div class="sandbox">
                    <label for="select-beast">Beast2:</label>
                    <select id="select-beast2" class="demo-default" placeholder="create a person by typing...">
                    </select>
                    
                </div>
   <div class="description">
                    These two select box have same values when values are created in either of the two.
                    <a href="https://selectize.github.io/selectize.js/">https://selectize.github.io/selectize.js/</a>
                </div>
</section>

JavaScript

$('#select-beast2').selectize({
                    create: true,
                    sortField: 'text',
                    searchField: 'item',
                    create: function(input) {
                        return {
                            value: input,
                            text: input
                    }
}
                });
                
                 $('#select-beast').selectize({
                    create: true,
                    sortField: 'text',
                    searchField: 'item',
                    create: function(input) {
                        return {
                            value: input,
                            text: input
                    }
}
                });