js仿QQ邮箱收件人选择与搜索功能

　　

之前因为项目开发需要,对于收件人选择与搜索的js实现,整理如下:

　　

页面截图:

　　

js仿QQ邮箱收件人选择与搜索功能

　　

主要html代码:

　　 　　 　　& lt; #——左侧——比; 　　& lt; div> 　　& lt; label>: & lt;/label> 　　& lt; div id=癲ivtxt”class=癿ailtxt_div”祝辞& lt;/div> 　　& lt;输入类型=耙亍眓ame=" messName " id=" messName "/比; 　　& lt;输入类型=耙亍眓ame=" messId " id=" messId "/比; 　　& lt;/div> 　　& lt; div> 　　& lt; label>主题:& lt;/label> 　　& lt;输入类型="文本" name=" messTitle " id=" messTitle "/比; 　　& lt;/div> 　　& lt; div> 　　& lt; label>信息:& lt;/label> 　　& lt; textarea name=" ddContent " id=" ddContent祝辞& lt;/textarea> 　　& lt;/div> 　　& lt; #——右侧——比; 　　& lt; div> 　　& lt;输入属性=" search_mail " type="文本" value=" https://www.yisu.com/zixun/Search联系……” 　　name=" txtsearch "/比; 　　& lt; div> & lt; img src=" https://www.yisu.com/images/email03.png "/祝辞& lt;/div> 　　& lt;/div> 　　& lt; div类=癿ailclist”比; 　　& lt; ul> 　　& lt; li> 　　& lt; div类=" firstmail " title=懊煳皇澄?S.L.”alt=癮a@qq.com” 　　屁股="渺位食物,S.L. "祝辞渺位食物,S.L。;/div> 　　& lt;/li> 　　& lt; li> 　　& lt; div类=" firstmail " title=鞍睬煲稀盿lt=癰b@qq.com” 　　屁股="安庆饮料"在安庆Beverage
　　& lt;/li> 　　& lt; li> 　　& lt; div类=" firstmail " title=?23456”电子战alt=癱c@qq.com” 　　屁股=?23456”电子战在123456 ew
　　& lt;/li> 　　& lt;/ul> 　　& lt;/div> 　　之前 　　 　　

主要js实现代码:

　　 　　 　　& lt;脚本type=" text/javascript祝辞 　　$(函数(){//点击收件人列表到收件的人 　　$ (" .firstmail ") .bind(“点击”,函数(){ 　　var mailTo=()美元.attr("屁股");//收件人名称 　　var mailToId=()美元.attr (“alt”);//收件人Id 　　var divtxt_val=(“# divtxt”)美元。text();//收件人框中的值 　　var messId=(“# messId”)美元.val();//隐藏的收件人Id 　　如果(divtxt_val.indexOf美元($ mailTo) & lt; 0){//若不存在,则拼接 　　$ (" # divtxt ") .append (“& lt;跨类=八ネ恕盿lt=" mailToId美元“+ +”,“在” 　　+ $ mailTo +”、“+”& lt;/span>”); 　　美元messId=messId + mailToId美元+“;”; 　　} 　　$ (" # messId ") .val ($ messId); 　　$ (" # messName ") .val ($ (" # divtxt ")。text());//隐藏的收件人名称 　　});//点击某个收件人,添加样式 　　$ (" .rece ") .live(“点击”,函数(){ 　　$ (" # divtxt”); (.rece) .removeClass (“on”); 　　$ (" # divtxt”); (“.rece”) . css(“背景颜色”," "). css(“颜色”,“”) 　　(美元).addClass (“”)。css(“背景颜色”,“# 545 f59”) . css(“颜色”、“# fff”); 　　});//点击删除键跟退格键,删除对应的收件的人 　　美元(文档).bind (“keydown”, 　　函数(事件){ 　　var messId=(“# messId”)美元.val();//收件人Id的值 　　var span_alt=美元(“# divtxt。”) .attr (“alt”);//选中的收件的人 　　如果($ span_alt !=null) { 　　var美元指数,span_size美元,美元mess_size, val美元; 　　指数=messId.indexOf美元($ span_alt); 　　span_size=span_alt.length美元; 　　mess_size=messId.length美元;//删除对应的收件人Id 　　val=messId.substring美元(0,美元指数) 　　+ messId.substring美元(美元指数+ span_size美元,美元mess_size); 　　$ (" # messId ") .val (val); 　　如果(46==事件。键码){//删除键 　　$ (" # divtxt碧绿”).remove (); 　　$ (" # messName ") .val ($ (" # divtxt ")。text ()); 　　}else if (8==event.keyCode){//退格键 　　$ (" # divtxt碧绿”).remove (); 　　$ (" # messName ") .val ($ (" # divtxt ")。text ()); 　　返回错误; 　　} 　　} 　　} 　　）；//搜索框搜索事件 　　$ (" .search_mail ") .bind(“模糊”,函数(){=$ var内容(这).val (); 　　如果“搜索联系人……”!=内容,,内容!=" "){ 　　$ ("。李mailclist div”) . each(函数(){ 　　var name=$ ()。text (); 　　如果(name.indexOf(内容)==1){ 　　(美元)hide (); 　　其他}{ 　　(美元),告诉(); 　　} 　　}); 　　其他}{ 　　$ ("。李mailclist div),告诉(); 　　} 　　}); 　　}); 　　& lt;/script> 　　之前 　　 　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

js仿QQ邮箱收件人选择与搜索功能