How to create a tagging style with css, html and jquery?

Question

I have an input[type=text] element and another div for selected elements in my form.

I need to create my own custom tag plugin container and my problem is in css style and layout for the tag container and appearance for it.

This is my actual stage (very poor): http://jsfiddle.net/db8upk61/1/

I want something like it:

challenges

• how to simulate an input border between these elements?
• how to remove border from input element like the example above?
• how to mantain tags in the same line as input?

Answer 1

There are a lot of plugins that makes that, but, as you need to do.

You can create a container simulating an input and inside this container you can put the real input with border white, I made an example, take a look:

http://jsfiddle.net/93n2af0e/

CSS code:

.input-select-tag{
    background-color: #FFFFFF;
    boder: 1px solid #F1F1F1;
    height: 36px;
    width: 450px;
}
.selected-tags{
    padding: 2px;
}
.button{
    float: left;
    padding: 5px;
    margin-left: 2px;
}
.input{
    float: left;
    border: #FFFFFF;
    margin-left: 2px;
    padding: 5px;
}
.clear{
    clear: both;
}

HTML:

<form class='form-horizontal well'>
    <div class='control-group'>

        <div class='input-select-tag'>
            <div class='selected-tags'>
                <span class='alert button alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span> 
                <span class='alert button alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>          
            </div>

            <input type='text' name='selectTags' class='input' size="40"/>    
            <div class='clear'></div>
        </div>
    </div>
</form>

Hope it helps.

Answer 2

 var i = 7; $("input").focus(function(e) { // set cursor position if (!this.value.length) { this.value = $.map(Array(i * $(".alert").length), function() { return " " }).join(" ") } }).change(function(e) { // append new "tag" $(".alert").first().clone().text(function(i, text) { return text.replace(/tag1/, e.target.value) }).appendTo($(".alert").parent()); $(this).val("").focus() }).closest("form").submit(function(e) { e.preventDefault() }) 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <form class='form-horizontal well'> <div class='control-group'> <div class='selected-tags'> <span class='alert alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span> <span class='alert alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span> </div> <label>Tags</label> <br> <input type='text' name='selectTags' /> </div> </form> <style> .control-group { position: relative; } .alert { position: relative; top: 47px; font-size: 12px; padding: 2px; margin: 2px; } input { white-space: pre; width: 100%; } </style> 

jsfiddle http://jsfiddle.net/db8upk61/2/