JavaScript智能填写续写版（QQ邮箱地址栏简化版）

最新推荐文章于 2022-06-10 15:34:57 发布

Mr-Jee

最新推荐文章于 2022-06-10 15:34:57 发布

阅读量6.2k

点赞数

分类专栏： web技术文章标签： javascript qq function autocomplete border html

本文链接：https://blog.csdn.net/cj205/article/details/6277208

版权

web技术专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前阵子用QQ邮箱发了几封邮件，发现其中的输入地址栏很别致，看了下，做的很精细，用户体验也灰常的不错。就拿过来做了下实验。但是代码量还是大了点，而且我一直强调的适用性与通用性的抉择上我又要纠结了。昨天遇到一个问题，就是在一个文本框里输入一堆人的姓名，这些姓名已经存在数据库中了，大家也知道，客户永远都是希望能少付出点，多回报点的，基于这个情况我打算把QQ邮箱的借过来用，可是问题出现了，剥离他的功能不难，但是剥离完之后（因为很多地方的实现不是那么的一直，比如我就不需要邮箱检验等）发现太庞大了，而且也不是那么的适用于我的一个小功能上，因此就自己重新写了一个很小很小的简化版。虽然说花费的精力不大，但是却让客户很happy，何乐而不为呢。

由于csdn博客系统的原因，这段代码中会出现textStrtextStr的字样，请替换成textStr。有两处。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>智能填写</title>  
                            <style type="text/css" >          #multiinput {  
                font-size:22px;  
                border:1px #000 solid;  
                font-weight:700;  
            }  
            #newInput {  
                height:24px;  
                font-size:22px;  
                border:none;  
            }  
            #selection ul {  
                margin:0;  
                padding:0;  
                border:1px solid #000;  
                width:75px;  
                border-top:0;  
            }  
            #selection li {  
                list-style:none;  
                margin:0;  
                padding:0;  
                height:24px;  
                cursor:pointer;  
                width:75px;  
            }  
            #multiinput a:hover  {  
                background-color:#eee;  
                cursor:text;  
            }  
            li.selected {  
                background-color:#eee;  
            }  
        </style>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
        <script type="text/javascript"><!--  
            var str = ['张学友','张信哲','刘德华','孙燕姿','周杰伦','张含韵','许飞','许巍','张宇','周星驰','唐朝乐队','迪克牛仔','郑伊健','陈小春','汪峰'];  
            $(function(){  
                //输入框获得焦点时  
                $("#newInput").focus(function(){  
                    var textStr = ["<ul>"];  
                    for(var i = 0; i < str.length; i++){  
                        textStr.push('<li>' + str[i] + '</li>');  
                    }  
                    textStr.push("</ul>");  
                    textStr = textStr.join('');  
                    $("#selection").show().empty().append(textStr);  
                })  
                //输入框失去焦点时  
                .blur(function(e){  
                    $("#selection").hide();  
                })  
                //按键按下时  
                .keydown(function(e){  
                    if(e.keyCode == 8 && $(this).val().length == 0) {  
                        $(this).prev().remove();  
                    } else if(e.keyCode == 40) {  
                        move(true);  
                    }   else if(e.keyCode == 38) {  
                        move(false);  
                    } else if(e.keyCode == 13) {  
                        $('<a>' + $('.selected').text() + ';</a>').insertBefore('#newInput');  
                        $('#newInput').val('').focus();  
                    }  
                })  
                //按键弹出时，进行搜索匹配。  
                .keyup(function(e){  
                    if(e.keyCode == 40 || e.keyCode == 8 || e.keyCode == 38)  
                        return;  
                    var textStr = $(this).val();  
                    var reg = new RegExp('(?=[^@]+)[^@]*' + textStr + '[^@]*(?=@|$)','g');  
                    var arr = str.join("@").match(reg) || [];  
                    textStr = ['<ul>'];  
                    for(var i = 0; i < arr.length; i++) {  
                        textStr.push('<li>' + arr[i] + '</li>');  
                    }  
                    textStr.push('</ul>');  
                    textStr = textStr.join('');  
                    $("#selection").empty().show().append(textStr);  
                });  
                //li的背景效果  
                $("#selection li").live("mouseover",function(){  
                    $(this).siblings().removeClass('selected').end().addClass('selected');  
                })  
                //li的选中事件  
                .live("mousedown",function(){  
                    $('<a>' + $(this).text() + ';</a>').insertBefore("#newInput");  
                    $("#newInput").val('').focus();   
                });  
                  
                $("#multiinput a").live('dblclick',function(){  
                    $(this).remove();  
                });  
            });  
            function move(down) {  
                var selected = $('.selected');  
                if(down) {  
                    if(selected.length == 0) {  
                        $('#selection li:first').addClass('selected');  
                    } else {  
                        selected.removeClass('selected').next().addClass('selected');  
                    }  
                } else {  
                    if(selected.length == 0) {  
                        $('#selection li:last').addClass('selected');  
                    } else  {  
                        selected.removeClass('selected').prev().addClass('selected');  
                    }  
                }  
            }  
          
// --></script>  
    </head>  
    <body>  
        <div id="multiinput">  
            <a id="t"></a><input id="newInput" type="text" autocomplete="off"/>  
        </div>  
        <div>  
            <div id="selection">  
            </div>  
        </div>  
    </body>  
</html>

这次由于机器的原因，我没有测试多个浏览器的问题，甚至连一些小BUG也没测试，发出来只是给大家一个参考，同时希望有兴趣的童鞋来改进下，如果对QQ邮箱本身的强大功能有兴趣的可以去看看，绝非是这这个这么简单。里面很多机制足以你们去想破脑袋的。作为一个开发者，在用好玩的东西的时候，你是否想过是怎么实现的呢。