autocomplete with contenteditable

by martyk

HTML

<label for="MyText">Email:</label>
<div id="MyText" contenteditable="true"></div

CSS

div {
    min-height: 25px;
    width: 60%;
    background:lightyellow;
    box-shadow: 1px 1px 2px 2px darkgrey;
}

JavaScript

var tags = [
    "example.com"
    ,"akamai.com"
    ,"2charts.com"
    ,"gmail.com"
    ,"jquery.com"
    ,"yahoo.com"
    ,"ymail.com"
    ,"hotmail.com"
];
var startTyping = "Start Typing";


function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}
function split( val ) {
    return val.split( /@/ );
}
function extractLast( term ) {
    return split( term ).pop();
}

$("#MyText")
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length > 0) {
                    results = $.ui.autocomplete.filter(tags, term);
                } else {
                    results = [startTyping];
                }
            }
            response(results);
        },
        focus: function () {
            return false;
        },
        select: function (event, ui) {
            if (ui.item.value !== startTyping) {
                var value = $(this).html();
                var terms = split(value);
                terms.pop();
                terms.push(ui.item.value);
                $(this).html(terms.join("@"));
            ...