有谁知道豆瓣说的微博输入框搜索自动补齐是怎么实现的？

Question

豆瓣说的微博输入框搜索自动补齐，当你在输入框输入@开头的时候能够自动把你的好友搜索出来，我知道有一些jquery autocomplete可以实现，但是要控制只有当输入指定字符才触发这个功能不知道怎么实现，找了些jquery autocomplete都没有提到类似这样的功能～

Answer 1

0. 绑定keyup事件，每次事件发生判断前一个字符是否是'@'，是的话就发送ajax请求相关的数据，得到响应后显示自动补全列表。

1. 豆瓣用的jQuery，相关的js代码在：

<script type="text/javascript" src="http://img3.douban.com/anduin/anduin-min-1311061054.js"></script>

（压缩过了，部分变量和函数名缩成了单字母，可以用http://jsbeautifier.org/格式化一下）

2. 绑定keyup的代码：

this.bind("keyup", function (d) {
            var c = c || e(b.highlighter);
            offset = g.getCursorPosition(this); // 当前光标位置
            preChar = d.target.value.charAt(offset - 1); // 前一字符
            d.target.value || c.html("");
            if (offset < d.target.value.length + 1 && k.length && h) o = g.highlightName(k, d.target.value).replace(/\s{2,}/g, " "), c.html(o), o = d.target.value.replace(/<b[^>]+>|<\/b>/g, ""), d.target.value = o, g.setCursorPosition(d.target, offset);
            d.keyCode !== 38 && d.keyCode !== 40 && d.keyCode !== 13 && d.keyCode !== 16 && d.keyCode !== 9 
              && j(this, preChar, offset); // 交给j函数去处理
            (d.keyCode === 9 || d.keyCode === 13) && a && a.find(".on").size() && a.is(":visible") && f(this, b.highlighter)
        });

3. 判断前一字符是否是‘@’，发送ajax请求和响应的代码：

j = function (d, c, j) {
                var h = d.value,
                    k = h.substring(0, j).lastIndexOf("@"),
                    o = h.substring(k, j).indexOf(" "),
                    q = {};
                p = h.substring(k + 1, j);
                // 判断‘@’
                b.mode === "complete" ? c === "@" && (q = g.getCarePos(d, h.substring(0, j - 1)), l(d, q)) : m(d);
                k !== -1 && o === -1 ? (b.mode === "complete" && (q = g.getCarePos(d, h.substring(0, k))), p && p.length <= 10 ? 
                // 发送ajax请求
                e.getJSON(  b.dataUrl,                        //** URL
                            { count: b.itemCount, word: p},   //** 数据
                            function (c) {                    //** 响应函数
                    c.users.length ? (a.html(Mustache.to_html(b.listTmpl, c)), a.find("li").hasClass("on") || a.find("li:first").attr("class", "on"), n = a.find("li").size(), b.mode === "complete" ? l(d, q) : m(d)) : a.hide()
                }) : b.mode === "complete" ? i() : (c = b.customData(), c.users.length ? (n = c.users.length, a.html(Mustache.to_html(b.listTmpl, c)), a.children().click(function () {
                    f(d, b.highlighter)
                })) : i())) : a && a.hide()
            },

Answer 2

请参考这个：http://www.cnblogs.com/idche/archive/...
有实现的原理，遇到的问题以及源代码。

Answer 3

个人猜想..
判断当前输入的字符是否等于@来决定触发事件..

Answer 4

好好好好好好好好好好好好好好好好好好好好好dddd好好好好好好好