开发者社区> 问答> 正文

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

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

展开
收起
小旋风柴进 2016-03-23 11:57:29 2425 0
1 条回答
写回答
取消 提交回答
    1. 绑定keyup事件,每次事件发生判断前一个字符是否是'@',是的话就发送ajax请求相关的数据,得到响应后显示自动补全列表。
    2. 豆瓣用的jQuery,相关的js代码在:
    <script type="text/javascript" src="http://img3.douban.com/anduin/anduin-min-1311061054.js"></script>
    (压缩过了,部分变量和函数名缩成了单字母,可以用http://jsbeautifier.org/格式化一下)
    1. 绑定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)
            });
    1. 判断前一字符是否是‘@’,发送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()
                },
    2019-07-17 19:10:43
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
阿里云搜索产品年度升级发布 立即下载
《开放搜索查询分析服务架构分享》 立即下载
打造高性能高可用的搜索服务——爱奇艺搜索架构实践 立即下载