jQueryUI autocomplete for IntelliSense

Implementing a jquery ui autocomplete to listen for a certain keypress and then show matches. A selected match should be inserted at the current caret position.

HTML

<script src="https://raw.github.com/garyharan/jQuery-caret-utilities/master/jquery.caret.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<html>
<head>
</head>
<body>
    <form>
        <label for="toInput">To</label>
        <input type="text" id="toInput" />
        <label for="subjectInput">Subject</label>
        <input type="text" id="subjectInput" />
        <label for="bodyTextarea">Message Body</label>
        <textarea type="text" id="bodyTextarea" ></textarea>
    </form>
</body>
</html>

CSS

form{
    color: #555;
    font-family: Impact, Charcoal, sans-serif;
    width:30em;
    margin:3em;
}
label {
    display: block;
}
textarea {
    width:100%;
    height:10em;
}
input {
    width:100%
}
textarea, input {
    color: #333;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    padding:0.5em;
}

JavaScript

/* jquery.caret plugin
 * by Gideon Sireling
 * http://plugins.jquery.com/caret/
 */
(function(e){function t(e,t,n){if(e.createTextRange){var r=e.createTextRange();r.moveStart("character",t);r.moveEnd("character",n||t);r.select()}else if(e.selectionStart){e.focus();e.setSelectionRange(t,n||t)}}function n(e){if(typeof e.selectionStart=="number"){return e.selectionStart}else if(document.selection){var t=document.selection.createRange();var n=t.text.length;t.moveStart("character",-e.value.length);return t.text.length-n}}e.fn.insertAtCaret=function(n,r){var i=e(this).get(0);if(document.selection){i.focus();var s=i.value.replace(/\r\n/g,"\n");var o=document.selection.createRange();if(o.parentElement()!=i){return false}o.text=n;var u=tmp=i.value.replace(/\r\n/g,"\n");for(var a=0;a<s.length;a++){if(s.charAt(a)!=u.charAt(a))break}for(var f=0,l=0;tmp.match(n)&&(tmp=tmp.replace(n,""))&&f<=a;f=l+n.length){l=u.indexOf(n,f)}}else if(i.selectionStart){var l=i.selectionStart;var c=i.selectionEnd;i.value=i.value.substr(0,l)+n+i.value.substr(c,i.value.length)}if(l){t(i,l+n.length)}else{i.value=n+i.value}return this};e.fn.setCaretPosition=function(n,r){var i=e(this).get(0);i.focus();t(i,n,r);return this};e.fn.getCaretPosition=function(){var t=e(this).get(0);e(t).focus();return n(t)};e.fn.getSelectedText=function(){var t=e(this).get(0);if(typeof t.selectionStart=="number"){return e(t).val().substr(t.selectionStart,t.selectionEnd-t.selectionStart)}else if(document.getSelection){return document.getSelection()}else if(window.getSelection){return window.getSelection()}}})(jQuery)


// create my namespace
var my = my || {};

//create some sample data
my.sampleData = {
    replaces : ['@name', '@surname', '@greeting', '@age', '@birthdate', '@email'],
    users : [{
        'name' : 'John',
        'surname':'Doe' ,
        'greeting':'Hello',
        'age':25,
        'birthdate':'14 June',
        'email':'[email protected]'
    }]
};

my.manualSearch = false;

//the regular expression...