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

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

页面截图：

主要HTML代码：

rush:xhtml;"> <#--左侧-->

To:

Subject: sstitle" id="messtitle"/>

Message: </div> <#--右侧--> <div> <input calss="search_mail" type="text" value="Search Contact..." onclick="if(this.value== 'Search Contact...')this.value='';" onblur="if(this.value=='')this.value='Search Contact...';" name="txtsearch" /> <div><img src="/images/email03.png" /></div> </div> <div class="mailclist"> <ul> <li> <div class="f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tmail" title="Cata food,S.L." alt="[e-mail]" ass="Cata food,S.L.">Cata food,S.L.</div> </li> <li> <div class="f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tmail" title="Anqing Beverage" alt="[e-mail]" ass="Anqing Beverage">Anqing Beverage</div> </li> <li> <div class="f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tmail" title="123456ew" alt="[e-mail]" ass="123456ew">123456ew</div> </li> </ul> </div> </pre> </div> <p>主要js实现<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>：</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;"> <script type="text/javascript"> $(function(){ //点击收件人列表到收件人 $(".f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tmail").bind("click",function(){ var $mailTo=$(this).attr("ass");//收件人<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a> var $mailToId=$(this).attr("alt");//收件人Id var $divtxt_val=$("#divtxt").text();//收件人框中的值 var $messId=$("#messId").val();//隐藏的收件人Id if($divtxt_val.indexOf($mailTo)<0){//若不存在，则拼接 $("#divtxt").append("<span class='rece' alt='"+$mailToId+";'>" +$mailTo+";"+"</span>"); $messId=$messId+$mailToId+";"; } $("#messId").val($messId); $("#messName").val($("#divtxt").text());//隐藏的收件人<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a> }); <p>//点击某个收件人，<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>样式<br /> $(".rece").live("click",function(){<br /> $("#divtxt").find(".rece").removeClass("on");<br /> $("#divtxt").find(".rece").css("background-color","").css("color","")<br /> $(this).addClass("on").css("background-color","#545f59").css("color","#fff");<br /> });</p> <p>//点击<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>键跟退格键，<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>对应的收件人<br /> $(document).bind('keydown',function(event) {<br /> var $messId=$("#messId").val();//收件人Id的值<br /> var $span_alt=$("#divtxt .on").attr("alt");//选中的收件人<br /> if($span_alt != null){<br /> var $index,$span_size,$mess_size,$val;<br /> $index=$messId.indexOf($span_alt);<br /> $span_size=$span_alt.length;<br /> $mess_size=$messId.length;<br /> //<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>对应的收件人Id<br /> $val=$messId.substring(0,$index)<br /> +$messId.substring($index+$span_size,$mess_size);<br /> $("#messId").val($val);<br /> if(46==event.keyCode ){ //Delete键<br /> $("#divtxt .on").remove();<br /> $("#messName").val($("#divtxt").text());<br /> }else if(8==event.keyCode){//退格键<br /> $("#divtxt .on").remove();<br /> $("#messName").val($("#divtxt").text());<br /> return false;<br /> }<br /> }<br /> }<br /> );</p> <p>//<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>框<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>事件<br /> $(".search_mail").bind("blur",function(){<br /> var content = $(this).val();<br /> if("Search Contact..." != content && content !=""){<br /> $(".mailclist li div").each(function(){<br /> var name = $(this).text();<br /> if(name.indexOf(content) == -1){<br /> $(this).hide();<br /> }else{<br /> $(this).show();<br /> }<br /> });<br /> } else {<br /> $(".mailclist li div").show();<br /> }<br /> });<br /> });</p> </script> </pre> </div> <p>以上就是本文的全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p><!-- jb51-mobi-auto-h --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="1811740773" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="topcard-tags"></div> </div> </div> </div> <!-- row end--> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- jb51-mobi-auto-h --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="1811740773" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <img src="/res/2023/08-08/08/570dc155753a369e7cec28e6419cd2c0.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="/qqmail/4609871.html" title="QQ邮箱如何发文件给别的邮箱？QQ邮箱发文件给别的邮箱的方法">QQ邮箱如何发文件给别的邮箱？QQ邮箱发文件给别的邮箱的方法</a> </div> <div class="summary">很多人在工作的时候都需要使用QQ邮箱软件，那么你们晓得QQ邮...</div> </div><div class="list_con"> <img src="/res/2023/08-05/17/26008276cfe1e7bba55812f9bf691c25.jpg" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="/qqmail/4607551.html" title="qq邮箱在手机qq哪里找-手机qq查找qq邮箱的方法">qq邮箱在手机qq哪里找-手机qq查找qq邮箱的方法</a> </div> <div class="summary">qq邮箱是很多小伙伴在工作的时候经常用到的工具，那么在这个...</div> </div><div class="list_con"> <img src="/res/2023/08-05/17/cc5d081ae953fb3f98200d595b6cce08.jpg" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="/qqmail/4607544.html" title="epic收不到qq邮箱验证码">epic收不到qq邮箱验证码</a> </div> <div class="summary">epic收不到qq邮箱验证码的原因和解决方法：1、QQ邮箱验证码已...</div> </div><div class="list_con"> <img src="/res/2023/08-05/17/e331a1a152c68b3f7a59383b46a7dd80.jpg" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="/qqmail/4607487.html" title="为什么不建议用qq邮箱">为什么不建议用qq邮箱</a> </div> <div class="summary">1、隐私管理差：QQ邮箱的隐私保护不够完善，可能会存在安全隐...</div> </div><div class="list_con"> <img src="/res/2023/06-22/11/a8ee3ae5d2455209d0f32ec112eeb70d.jpg" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="/qqmail/4600311.html" title="QQ邮箱APP如何开启夜间模式？">QQ邮箱APP如何开启夜间模式？</a> </div> <div class="summary">今天我们就来说说QQ邮箱APP如何开启夜间模式的一些信息。很多...</div> </div><div class="list_con"> <img src="/res/2023/06-22/09/08650520f7f795f1d17cd45500363d7c.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="/qqmail/4599535.html" title="如何在手机QQ邮箱中设置明星邮件">如何在手机QQ邮箱中设置明星邮件</a> </div> <div class="summary">今天就来说说手机QQ邮箱如何设置明星邮件的一些信息。很多朋...</div> </div><!-- jb51-mobi-auto-h --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="1811740773" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <script src="/js/count.js"></script> </body> </html>