邮件输入检索
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>
