a plugin to simulate at prompt

jquery.at.complete.js

/**
 * Created with JetBrains PhpStorm.
 * User: Usbuild
 * Date: 12-12-20
 * Time: 上午10:21
 */
 
(function ($) {
    $.fn.at_complete = function (options) {
        var opts = $.extend({}, $.fn.at_complete.defaults, options);
        var textBox = this;
        this.css('font-size', '15pt')
            .css('width', '400px')
            .css('word-break', 'break-all')
            .css('word-wrap', 'break-word');
 
        var heightDiv = $("<div/>")
            .attr('id', 'height_div')
            .css('font-size', this.css('font-size'))
            .css('visibility', 'hidden')
            .css('position', 'absolute')
            .css('z-index', '10000')
            .css('top', '0')
            .css('left', '300px')
            .css('word-break', 'break-all')
            .css('word-wrap', 'break-word')
            .css('width', this.width() + 'px')
            .appendTo($("body"));
 
        var widthDiv = $("<div/>")
            .attr('id', 'width_div')
            .css('font-size', this.css('font-size'))
            .css('visibility', 'hidden')
            .css('position', 'absolute')
            .css('z-index', '10000')
            .css('top', '0')
            .css('left', '3000')
            .appendTo($("body"));
 
        var ctxDiv = $('<div class="ctx"><ul class="content"></ul></div>')
            .appendTo($('body'));
 
        var getHeight = function (text) {
            heightDiv.html(text.replace(/\n/g, '<br/>'));
            return heightDiv.height() + 10;
        };
 
        var getWidth = function (text) {
            var h = getHeight('x');
            var olen = getHeight(text);
            if (h != olen) {
                for (var i = 0; i < text.length; ++i) {
                    var s = text.substr(0, text.length - i);
                    var len = getHeight(s);
                    if (len != olen) {
                        text = text.substr(text.length - i);
                        break;
                    }
                }
            }
            widthDiv.html(text);
            return widthDiv.width();
        };
 
        var getPos = function (text) {
            return {x:getWidth(text), y:getHeight(text)}
        };
 
        var showContext = function (text) {
            var pos = getPos(textBox.val().substr(0, textBox.prop('selectionStart')));
            var content = ctxDiv.find('.content');
 
            $.post(opts.url, {key:text}, function (e) {
                content.html('');
                $.each(e, function (t, i) {
                    var li = $("<li></li>");
                    li.html(i.name);
                    content.append(li);
                });
                ctxDiv.css('top', pos.y + 'px')
                    .css('left', pos.x + 'px')
                    .css('display', 'block');
            }, 'json');
        };
        var hideContext = function () {
            ctxDiv.css('display', 'none');
        };
        $('.ctx .content li').live('hover',function (e) {
            $('.ctx .content li').removeClass('active');
            $(this).addClass('active');
        }).live('mouseout', function (e) {
                $('.ctx .content li.active').removeClass('active');
            });
        $('.ctx .content li.active').live('mousedown', function (e) {
            if ($('.ctx .content li.active').length == 0) return;
            var start = textBox.prop('selectionStart');
            var validText = textBox.val().substr(0, start);
            var lastIndexAt = validText.lastIndexOf('@');
            var before = validText.substr(0, lastIndexAt + 1) + $('.ctx .content li.active').html() + ' '+textBox.val().substr(textBox.prop('selectionStart'));
            textBox.val(before).focus();
            hideContext();
        });
 
        this.bind('keyup click',function (evt) {
                if (evt.keyCode <= 18 && evt.keyCode >= 16) return;
                if (ctxDiv.is(':visible')) {
                    if (evt.keyCode) {
                        if (evt.keyCode == 40 || evt.keyCode == 38) {
                            return;
                        }
                        if ((evt.keyCode == 37 && textBox.prop('selectionStart') == 0) || (evt.keyCode == 39 && textBox.prop('selectionStart') == textBox.val().length)) {
                            return;
                        }
                    }
                }
                var start = textBox.prop('selectionStart');
                var validText = textBox.val().substr(0, start);
                var lastIndexAt = validText.lastIndexOf('@');
                var lastIndexSpace = validText.lastIndexOf(' ');
                var lastIndexCR = validText.lastIndexOf('\n');
                if (lastIndexSpace < lastIndexAt && lastIndexCR < lastIndexAt || validText.charAt(validText.length - 1) == '@') {
                    var seartchText = validText.substr(lastIndexAt + 1);
                    showContext(seartchText);
                } else {
                    hideContext();
                }
            }
        ).
            bind('keydown',function (evt) {
                if (ctxDiv.is(':visible')) {
                    if (evt.keyCode == 40 || evt.keyCode == 38) {
                        evt.preventDefault();
                        var active = $('.ctx .content li.active');
                        var next;
                        if (evt.keyCode == 40) {
                            next = active.next('.ctx .content li');
                            if (next.length == 0) {
                                next = $('.ctx .content li').first();
                            }
                        } else {
                            next = active.prev('.ctx .content li');
                            if (next.length == 0) {
                                next = $('.ctx .content li').last();
                            }
                        }
                        active.removeClass('active');
                        if (active.length == 0 || next.length == 0) {
                            $('.ctx .content li').first().addClass('active');
                        } else {
                            next.addClass('active');
                        }
                    } else if (evt.keyCode == 13) {
                        evt.preventDefault();
                        $('.ctx .content li').trigger('mousedown');
                    }
                }
            }).bind('blur', function () {
                hideContext();
            });
 
    };
    $.fn.at_complete.defaults = {};
})
    (jQuery);
 
$(function () {
    $('#txt').at_complete({url:"/art/JSON"});
});