邮件输入检索

js:

  1 $.fn.mail_input=function(options){
  2     return this.each(function(){
  3         var $me=$(this);
  4         var _menu=$("<div class='drop-menu'><p>请选择您的邮箱类型...</p></div>")
  5         var mail_list=["@qq.com","@163.com","@126.com","@sina.com.cn","@hotmail.com","@sohu.com","@gmail.com"];
  6         var ul_list=$("<ul></ul>")
  7         var valkey="";
  8         $me.bind("keyup",function(e){
  9             if(e.which==40){//向下键
 10                 var ul_obj=$(".drop-menu").find("ul");
 11                 var data_length=ul_obj.find("li").length;
 12                 if(data_length>0){
 13                     $(".drop-menu").removeClass('hidden')
 14                     var caretPos = -1;
 15                     var li_obj_selected = ul_obj.find("li[flag='1']");
 16                     caretPos = li_obj_selected.attr("index");
 17                     caretPos++;
 18                     if (caretPos >= data_length) {
 19                         caretPos = 0;
 20                      }
 21                     ul_obj.find("li").each(function () {
 22                         $(this).removeClass("active").attr({
 23                             flag: "0"
 24                         });
 25                     });
 26                     if(li_obj_selected.length==0){
 27                         ul_obj.find("li:first").attr("flag",1).addClass("active");
 28                     }
 29                     ul_obj.find("li[index='" + caretPos + "']").attr({
 30                         flag: "1"
 31                     }).addClass("active")
 32                 }
 33             }else if(e.which==38){//向上键
 34                 var ul_obj=$(".drop-menu").find("ul");
 35                 var data_length=ul_obj.find("li").length;
 36                 if(data_length>0){
 37                     $(".drop-menu").removeClass('hidden')
 38                     var caretPos = -1;
 39                     var li_obj_selected = ul_obj.find("li[flag='1']");
 40                     caretPos = li_obj_selected.attr("index");
 41                     caretPos--;
 42                      if (caretPos<0) {
 43                         caretPos = data_length-1;
 44                      }
 45                     ul_obj.find("li").each(function () {
 46                         $(this).removeClass("active").attr({
 47                             flag: "0"
 48                         });
 49                     });
 50                     if(li_obj_selected.length==0){
 51                         ul_obj.find("li:first").attr("flag",1).addClass("active");
 52                     }
 53                     ul_obj.find("li[index='" + caretPos + "']").attr({
 54                         flag: "1"
 55                     }).addClass("active")
 56                 }
 57             }else if(e.which==13){
 58                 if(_menu.find("li[flag='1']").length>0){
 59                     $me.val(_menu.find("li[flag='1']").html());
 60                     _menu.addClass("hidden")
 61                     var _maill=$("input[id='to']").val();
 62                     if(_maill!="" && /.+@.+\.[a-zA-Z]{2,4}$/.test(_maill)){
 63                         $me.parent(".form-row").removeClass("error")
 64                         $me.parent(".form-row").find(".help-inline").addClass("hidden");
 65                         $me.trigger("blur");
 66                     }
 67                     return false;
 68                 }
 69             }
 70             var _val=$.trim($me.val().replace(/[ ]/g,""));                
 71             if(valkey==$.trim($(this).val().replace(/[ ]/g,""))){//判断输入跟上次是否相同
 72                 return false;
 73             }
 74             if(_val.length>0){    
 75                 valkey=_val;
 76                 _menu.removeClass("hidden");
 77                 ul_list.find("li").remove();
 78                 //reg = '@\w+'
 79                 if(_val.indexOf("@")!="-1"){
 80                     var str_last=_val.substring(_val.indexOf("@"));
 81                     if(str_last=="@"){
 82                         for(var i=0;i<mail_list.length;i++){                                
 83                             ul_list.append("<li flag='0' index='"+i+"'>"+_val.replace("@","")+mail_list[i]+"</li>");
 84                         }
 85                     }else{
 86                         var s_index=0;
 87                         for(var j=0;j<mail_list.length;j++){
 88                             var arrMactches = mail_list[j].match(str_last);
 89                            if (arrMactches) {
 90                                ul_list.append("<li flag='0' index='"+s_index+"'>"+_val.replace(str_last,"")+mail_list[j]+"</li>");
 91                                s_index++;
 92                            }
 93                         }
 94 
 95                     }
 96                 }else{
 97                     for(var i=0;i<mail_list.length;i++){                                
 98                         ul_list.append("<li flag='0' index='"+i+"'>"+_val+mail_list[i]+"</li>");
 99                     }
100                 }    
101                 _menu.append(ul_list);
102                 ul_list.find("li").bind("click",function(){
103                     $me.val($(this).html());
104                     _menu.addClass("hidden");
105                     $me.trigger("blur");
106                 }).bind("mouseenter",function(){
107                     $(this).addClass("active");
108                 }).bind("mouseleave",function(){
109                     $(this).removeClass("active");
110                 })
111                 $me.parents(".form-row").append(_menu);
112             }else{
113                 _menu.addClass("hidden")
114             };    
115                 
116         }).bind("focus",function(){
117             $me.addClass("focus")
118         }).bind("blur",function(){
119             $me.removeClass("focus")
120         });    
121     })
122 }

调用：

<script>
$(function(){
    $("#to").mail_input();
})
</script>

html:

 1 <div class="form-row">
 2  <input type="text" value="" class="input-text" autocomplete="off" name="to" id="to">
 3 　　<span class="help-inline hidden">请输入正确的邮箱地址</span>
 4      <div class="drop-menu">
 5 　　<p>请选择您的邮箱类型...</p>
 6 <ul>
 7 <li index="0" flag="0">weibo@qq.com</li>
 8 <li index="1" flag="0">weibo@163.com</li>
 9 <li index="2" flag="0">weibo@126.com</li><li index="3" flag="0">weibo@sina.com.cn</li>
10 <li index="4" flag="0">weibo@hotmail.com</li>
11 <li index="5" flag="0">weibo@sohu.com</li>
12 <li index="6" flag="0">weibo@gmail.com</li>
13 </ul></div>
14  </div>