JS输入用户名自动显示邮箱后缀列表

来源：互联网发布：累计消费金额的算法编辑：程序博客网时间：2024/05/01 14:13

---样式

----JS

            //页面装载CSS样式
            if (settings.autoClass && $("#mailListAppendCss").size() === 0) {
                $('<style id="mailListAppendCss" type="text/css">.mailListBox{border:1px solid #369; background:#fff; font:12px/20px Arial;}.mailListDefault{padding:0 5px;cursor:pointer;white-space:nowrap;}.mailListFocus{padding:0 5px;cursor:pointer;white-space:nowrap;background:#369;color:white;}.mailListHlignt{color:red;}.mailListFocus .mailListHlignt{color:#fff;}</style>').appendTo($("head"));
            }
            var cb = settings.boxClass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markCalss; //插件的class变量
            var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor;
            //创建邮件内部列表内容
            $.createHtml = function (str, arr, cur) {
                var mailHtml = "";
                if ($.isArray(arr)) {
                    $.each(arr, function (i, n) {
                        if (i === cur) {
                            mailHtml += '<div class="mailHover ' + cf + '" id="mailList_' + i + '"><span class="' + cm + '">' + str + '</span>@' + arr[i] + '</div>';
                        } else {
                            mailHtml += '<div class="mailHover ' + cl + '" id="mailList_' + i + '"><span class="' + cm + '">' + str + '</span>@' + arr[i] + '</div>';
                        }
                    });
                }
                return mailHtml;
            };
            //一些全局变量
            var index = -1, s;
            $(this).each(function () {
                var that = $(this), i = $(".justForJs").size();
                if (i > 0) { //只绑定一个文本框
                    return;
                }
                var w = that.outerWidth(), h = that.outerHeight(); //获取当前对象（即文本框）的宽高
                //样式的初始化
                that.wrap('<span style="display:inline-block;position:relative;"></span>')
                .before('<div id="mailListBox_' + i + '" class="justForJs ' + cb + '" style="min-width:' + w + 'px;_width:' + w + 'px;position:absolute;left:-6000px;top:' + h + 'px;z-index:' + z + ';"></div>');
                var x = $("#mailListBox_" + i), liveValue; //列表框对象
                that.focus(function () {
                    //父标签的层级
                    $(this).css("color", fc).parent().css("z-index", z);
                    //提示文字的显示与隐藏
                    if (hint && text) {
                        var focus_v = $.trim($(this).val());
                        if (focus_v === text) {
                            $(this).val("");
                        }
                    }
                    //键盘事件
                    $(this).keyup(function (e) {
                        s = v = $.trim($(this).val());
                        if (/@/.test(v)) {
                            s = v.replace(/@.*/, "");
                        }
                        if (v.length > 0) {
                            //如果按键是上下键
                            if (e.keyCode === 38) {
                                //向上
                                if (index <= 0) {
                                    index = newArr.length;
                                }
                                index--;
                            } else if (e.keyCode === 40) {
                                //向下
                                if (index >= newArr.length - 1) {
                                    index = -1;
                                }
                                index++;
                            } else if (e.keyCode === 13) {
                                //回车
                                if (index > -1 && index < newArr.length) {
                                    //如果当前有激活列表
                                    $(this).val($("#mailList_" + index).text());
                                }
                            } else {
                                if (/@/.test(v)) {
                                    index = -1;
                                    //获得@后面的值
                                    //s = v.replace(/@.*/, "");
                                    //创建新匹配数组
                                    var site = v.replace(/.*@/, "");
                                    newArr = $.map(mailArr, function (n) {
                                        var reg = new RegExp(site);
                                        if (reg.test(n)) {
                                            return n;
                                        }
                                    });
                                } else {
                                    newArr = mailArr;
                                }
                            }
                            x.html($.createHtml(s, newArr, index)).css("left", 0);
                            if (e.keyCode === 13) {
                                //回车
                                if (index > -1 && index < newArr.length) {
                                    //如果当前有激活列表
                                    x.css("left", "-6000px");
                                }
                            }
                        } else {
                            x.css("left", "-6000px");
                        }
                    }).blur(function () {
                        if (hint && text) {
                            var blur_v = $.trim($(this).val());
                            if (blur_v === "") {
                                $(this).val(text);
                            }
                        }
                        $(this).css("color", bc).unbind("keyup").parent().css("z-index", 0);
                        x.css("left", "-6000px");

                    });
                    //鼠标经过列表项事件
                    //鼠标经过
                    $(".mailHover").live("mouseover", function () {
                        index = Number($(this).attr("id").split("_")[1]);
                        liveValue = $("#mailList_" + index).text();
                        x.children("." + cf).removeClass(cf).addClass(cl);
                        $(this).addClass(cf).removeClass(cl);
                    });
                });

                x.bind("mousedown", function () {
                    that.val(liveValue);
                });
            });
        };

})(jQuery);
</script>

-----文本书写

<asp:TextBox class="dl_name" ID="txtUserEmail" runat="server" MaxLength="30" Width="146px" Height="20px" Style="line-height: 20px;"></asp:TextBox>

-----紧跟文本书写的JS
                                     <script type="text/javascript">
                                         $("#txtUserEmail").mailAutoComplete({
                                             boxClass: "out_box", //外部box样式
                                             listClass: "list_box", //默认的列表样式
                                             focusClass: "focus_box", //列表选样式中
                                             markCalss: "mark_box", //高亮样式
                                             autoClass: false,
                                             textHint: true //提示文字自动隐藏
                                         });
</script>
                                    <div class="lin1_3">
                                    </div>

必须要在此程序的基础上引用jQuery库（能不能成还得看自己的造化）

效果如下图所示：

0 0