Emulate SO tag editor

Question

I'm trying to implement a 'Tag Editor' field in my app, the same way as SO does. Right now i got this:

EDIT: I have coded this into a jQuery plugin at: https://github.com/fernandotenorio/tagme.git

Fiddle

http://jsfiddle.net/FernandoTen/PnYuF/

html

<div style="margin-left: auto; margin-right: auto; width: 400px;">      
            <span style='color: #333; font-size: small'>
                Tags [a-z A-Z 0-9 # + . -]
            </span>

            <div id='tags_container'>   
                <span id='tags_queue'></span>   
                <input type='text' id='tf' />
            </div>
</div>

js

$(document).ready(function () {

var rexp = /[^a-zA-Z0-9#+\.\-]/
var left = 37;
var right = 39;
var del = 8;
var space = 32;
var comma = 188;
var minlen = 3;
var maxlen = 15;
var current_tag = null

$('#tf').focus().attr('maxlength', maxlen)

$('#tags_container').click(function () {
    $('#tf').focus()
})

$('#tf').keydown(function (e) {

    var code = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
    var txt = $(this).val().trim()

    // handle navigation between tags
    if ((code === left || code === right) && txt.length === 0) {

        if (!current_tag) 
        {
            if (code === left) 
                current_tag = $('#tags_queue span').last()
            else 
                current_tag = $('#tags_queue span').first()

            if (current_tag.length > 0) current_tag.css('background-color', '#9FC2D6')
        } else //current tag exists
        {
            if (code === left) 
                current_tag = current_tag.css('background-color', '#B8D0DE').prev()
            else 
                current_tag = current_tag.css('background-color', '#B8D0DE').next()

            if (current_tag.length > 0) 
                current_tag.css('background-color', '#9FC2D6')
            // hit last/first, clean current_tag
            else
            {                    
                current_tag.css('background-color', '#B8D0DE')
                current_tag = null
            }
        }            
    }
});

$('#tf').keypress(function (e) {
    var token = String.fromCharCode(e.which)
    var code = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;

    if (token.match(rexp) && (code !== del) && (code !== left) && (code !== right)) 
        return false;                               
});


$('#tf').keyup(function (e) {
    var code = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
    var txt = $(this).val().trim()

    if (code === del && txt.length === 0 && current_tag) {
        current_tag.remove()
        current_tag = null
        return
    }

    // clean current_tag, user is typing
    if (current_tag && (code !== left) && (code != right))
    {
        current_tag.css('background-color', '#B8D0DE')
        current_tag = null          
    }

    if (txt.length > maxlen) txt = txt.substring(0, maxlen)

    if (txt.match(rexp)) {-
        $(this).val("")
        return
    } else if (code === space || code === comma) {

        if (txt.length < minlen) return;

        var tag = $('<span></span>', {
            'class': 'tag'
        }).html(txt).append($('<a></a>', {
            'class': 'close_tag',
            html: '&times',
            click: function () {                    
                $(this).parent().fadeOut(function(){
                    $(this).remove()
                    current_tag.css('background-color', '#B8D0DE')
                    current_tag = null
                })                    
            }
        }))

        $('#tags_queue').append(tag)
        $(this).val("")
    }
});

})

css

div#tags_container {
        border: 1px solid #ccc;
        padding-bottom: 5px;
        border-radius: 5px;
        background-color: beige;
        overflow: hidden;                                           
    }
    input#tf {
        border: 1px solid orange !important;
        outline: none !important;
        background-color: transparent !important;
        height: 30px;   
        margin-top: 2px;
        padding-left: 5px;

    }
    a.close_tag {
        margin-left: 5px;
        color: #fff;
    }
    a.close_tag:hover {
        cursor: pointer;
    }
    span.tag {
        background-color: #B8D0DE;
        color: #111;
        margin-left: 5px;
        margin-top: 5px;
        padding: 5px;
        float: left;
        border-radius: 5px;
    }
    span.tag:hover {
        background-color: #9FC2D6;
    }
    span#tags_queue {           
        margin-right: 5px;
        vertical-align: middle;
    }

The problem is, how can i handle the 'hidden' content using the arrows keys, the way SO does? It looks like i have to handle the cursor position inside the text-fields, and watch for arrow-left and arrow-right events...and there's also the click on the completed tags.

I can think of the following (anti-SO design) solutions:

1. remove white-space: nowrap from the tags_container div, and let the div 'grow' as the user add more tags.

2. Add overflow: scroll to the tags_container div (very ugly!)

So, i appreciate any new ideas on how to approximate the SO tag-editor behaviour. Thanks!

Answer 1

Reinvent the wheel is a bad practice : take a look at the excellent Tag-it jQuery plugin code, it implements the stuff you are working on.