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()
},