jQuery访新浪登录(Email提示)

前面我讲过jQuery访新浪登录，输入用户名，自动提示Email后缀，这里改进一下，看下效果图：

s代码如下：

 

<script type="text/javascript">

        var suffix = ["qq.com", "126.com", "163.com", "gmail.com", "sina.com", "yahoo.com", "hotmail.com"];//Email后缀

        $(document).ready(function() {

            $("#txtEmail").keyup(function(e) {//输入

                var key = (e.keyCode) || (e.which) || (e.charCode);

                if (key != 38 && key != 40 && key != 13) {

                    $("#eSuggest").empty().addClass("hidden");

                    var val = $("#txtEmail").val();

                    var prefix = (val.indexOf('@') != -1) ? val.split('@')[0] : val;

                    for (var i = 0; i < suffix.length; i++) {

                        var semail = prefix + "@" + suffix[i];

                        if (semail.indexOf(val) != -1) {

                            $("#eSuggest").removeClass("hidden").append("<li>" + semail + "</li>");

                        }

                    }

                    if ($("#eSuggest").hasClass("hidden") != true) {

                        $("#eSuggest li").each(function() {//遍历

                            $(this).mouseover(function() {

                                $(this).addClass("select");

                            });

                            $(this).mouseout(function() {

                                $(this).removeClass("select");

                            });

                            $(this).click(function() {

                                $("#txtEmail").val($(this).text()); //获得选中的值

                                $("#eSuggest").empty().addClass("hidden"); //隐藏

                            });

                        });

                    }

                }

            });

        });

        $(document).click(function() {//单击页面隐藏

            $("eSuggest").empty().addClass("hidden");//隐藏

        });

        $(document).keyup(function(e) {//键盘事件

            var key = (e.keyCode) || (e.which) || (e.charCode); //兼容IE和Firefox

            if (key == 38) {//键盘向上

                $("#eSuggest li").eq(getUpIndex()).addClass("select");

                getValue();

            }

            if (key == 40) {//键盘向下

                $("#eSuggest li").eq(getDownIndex()).addClass("select");

                getValue();

            }

            if (key == 13) {//键盘回车

                $("#eSuggest").empty().addClass("hidden");

            }

        });

        var getDownIndex = function() {//获得向下索引

            var index = 0;

            var len = $("#eSuggest li").size();

            for (var i = 0; i < len; i++) {

                if ($("#eSuggest li").eq(i).hasClass("select")) {

                    $("#eSuggest li").eq(i % len).removeClass("select");

                    index = i + 1;

                }

            }

            return index > (len - 1) ? 0 : (index % len);

        };

        function getUpIndex() {//获取向下索引

            var len = $("#eSuggest li").size();

            var index = len - 1;

            for (var i = 0; i < len; i++) {

                if ($("#eSuggest li").eq(i).hasClass("select")) {

                    $("#eSuggest li").eq(i % len).removeClass("select");

                    index = i - 1;

                }

            }

            return (index < 0) ? (len - 1) : (index % len);

        }

        function getValue() {

            var len = $("#eSuggest li").size();

            for (var i = 0; i < len; i++) {

                if ($("#eSuggest li").eq(i).hasClass("select")) {

                    $("#txtEmail").val($("#eSuggest li").eq(i).text());

                }

            }

        }

    </script>

 

html代码很简单，一个文本框，一个<ul>标记就行了，代码如下：

<input type="text" id="txtEmail" class="text" /><ul id="eSuggest" class="passCard hidden"></ul>

ul隐藏，等用到的时候再显示出来！！！

 

样式表：

 

    <style type="text/css">

    .select{ cursor:pointer; background-color:#E0EEEE;}

    .passCard{position:absolute;z-index:999999;width:auto;overflow:hidden;padding:0;margin:0;border:1px solid #ccc;background:#fff;text-align:left;}

    .passCard li.note{ text-align:left; color:#999;}

    .passCard li{font-size:12px;list-style:none;margin:0 1px;height:20px;padding:0 5px;clear:both;line-height:20px;cursor:pointer;color:#999;}

    .select{background-color:#E8F4FC;}

    .hidden{display:none;}

    #eSuggest{width:250px;}

    .text{width:250px;}

    </style>

功能实现：

1、输入自动提示email

2、鼠标可选择

3、键盘上下键可选择，回车之后可实现自己想要的功能。