Search code examples
jqueryhtmlbootstrap-tags-input

initialize an input tag as tags-input behaves strange

html:

<input type='text'id='some_id' class='form-control', data-role='tagsinput' />

js:

$("input").tagsinput();

but it changes style of input tasg as display='none' and adds an extra div.

Here is returned html:

<div class="bootstrap-tagsinput"> <input type="text" placeholder="" size="1"></div>
<input class="form-control" data-role="tagsinput" id="some_id" style="display: none;" type="text">

enter image description here

enter image description here

Why it is behaving strange?

Solution

  • This is not strange behaviour and it is functioning correctly. When you do $("input").tagsinput();, the library takes that input, wraps it in some other markup that it has styles for, and adds the special behaviour you want (which is tagging). This is a common phenomenon in JavaScript libraries.