Having trouble adding a feature to my multi-select input box using jQuery Chosen. The current functionality allows users to enter custom values not in the list.
The new feature should automatically format numbers entered by users, for example:
User input: 12142113114444
Expected output: 1-2-1421:1311 ZIO 4444
I've already implemented the logic for number formatting but I'm struggling to integrate it with my jQuery Chosen input box.
You can find my current input box code here: https://jsfiddle.net/b6xupfak/
HTML
<div style="padding: 20px;">
<label>Bootstrap + jQuery Chosen</label>
<div>
<select id="num" data-placeholder="Enter a Number" class="chosen-select" style="width:350px;" tabindex="4" multiple>
<option value="1-2-1421:1311 ZIO 4444">1-2-1421:1311 ZIO 4444</option>
<option value="2-6-2862:2342 ZIO 0001">2-6-2862:2342 ZIO 0001</option>
<option value="9-4-0082:3922 ZIO 7352">9-4-0082:3922 ZIO 7352</option>
</select>
</div>
<label>Bootstrap</label>
<div>
<input id="num_no_jqc" class="form-control" maxlength="21">
</div>
</div>Although my JavaScript function successfully formats the second input box, I'm unable to make it work with the jQuery Chosen input box.
It seems like jQuery Chosen has a specific element handling user input that I haven't identified yet.