您好,匿名用户
随意问技术百科期待您的加入

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

0 投票

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

用户头像 提问 2012年 12月1日 @ Diana 上等兵 (326 威望)
分享到:

1个回答

0 投票

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()
            },
用户头像 回复 2012年 12月1日 @ Heimerdinger 上等兵 (311 威望)
提一个问题:

相关问题

0 投票
1 回复 33 阅读
用户头像 提问 2012年 12月1日 @ Ziggs 上等兵 (345 威望)
0 投票
1 回复 83 阅读
0 投票
1 回复 37 阅读
用户头像 提问 2012年 12月1日 @ Soraka 上等兵 (319 威望)
0 投票
1 回复 43 阅读

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...