How to automatically delete Duplicate objects in template

[myspaceissecret]

I am trying to add two two functions in one input tag. BUT failed many times.

What i am trying to do ?

There are two functions in different input tags in my HTML template.

One for add tag by , .

AND second for autocomplete.

I am trying to add autocomplete and tags input in the same textinput, So i can use autocomplete and add tag at same time.

home.html

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="{{ STATIC_URL }}user_tags/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>




#This function is for `autocomplete`.    

<form>
    <label for="product">Product</label>
    <input type="text" name="product" id="product">
</form>

</form>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

#This function is for `add tag`

        <b>Add Tags </b>
        <input type="text" data-role="tagsinput" class="form-control" name="tags">
        <br>

What have i tried ?

I see an answer that if i add semicolons at the end of the both tag then it will work BUT it didn't work for me.

<form>
    <label for="product">Product</label>
    <input type="text" name="product" id="product"; data-role="tagsinput";>
</form>

I don't know what to do.

Any help would be Appreciated.

.