如何将标签添加到Asp.net文本框中？

Question

I am trying to develop an web application in asp.net where my goal is to create a textbox where user can type multiple phone numbers with comma and then it shows as tags. I want is as below:

I can already achieve this with the following code:

        <div class="control-group">
            <label class="control-label col-md-3 col-sm-3 col-xs-12">Input Tags</label>
            <div class="col-md-9 col-sm-9 col-xs-12">
                <input id="tags_1" type="text" class="tags form-control" value="social, adverts, sales" />
                <div id="suggestions-container" style="position: relative; float: left; width: 250px; margin: 10px;"></div>
            </div>
        </div>

        <script>
    function onAddTag(tag) {
        alert("Added a tag: " + tag);
    }

    function onRemoveTag(tag) {
        alert("Removed a tag: " + tag);
    }

    function onChangeTag(input, tag) {
        alert("Changed a tag: " + tag);
    }

    $(function () {
        $('#tags_1').tagsInput({
            width: 'auto'
        });
    });

but the problem is when I am making it as

  runat="server"

Then it is not showing with the tags anymore in the front end.

So, please suggest me how shall I do this.

Answer 1

Setting an input to runat=server prompts asp.Net to generate a totally unique id. If you inspect the HMTL you'll see the id is not tags_1 . You can turn this off by setting the ClientIDMode to static in your text box

<asp:Textbox runat="server" ClientIDMode="static".../>

As you can see you'll have to use a asp.Net textbox also, not just set a standard html one to runat="server"

your other option is to change your jQuery to select by something other than id, such as class:

<input id="tags_1" type="text" class="tags form-control 
     tags_1" value="social, adverts, sales" />

$('.tags_1').tagsInput({..});