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

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

页面截图：

主要html代码：

To:

Subject:

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="firstmail" title="Cata food,S.L." alt="[e-mail]" ass="Cata food,S.L.">Cata food,S.L.</div> </li> <li> <div class="firstmail" title="Anqing Beverage" alt="[e-mail]" ass="Anqing Beverage">Anqing Beverage</div> </li> <li> <div class="firstmail" title="123456ew" alt="[e-mail]" ass="123456ew">123456ew</div> </li> </ul> </div> </pre> </div> <p>主要js实现代码：</p> <div class="jb51code"> <pre class="brush:js;"> <script type="text/javascript"> $(function(){ //点击收件人列表到收件人 $(".firstmail").bind("click",function(){ var $mailTo=$(this).attr("ass");//收件人名称 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());//隐藏的收件人名称 }); <p>//点击某个收件人，添加样式<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>//点击删除键跟退格键，删除对应的收件人<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 /> //删除对应的收件人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>//搜索框搜索事件<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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。</p><ins class="adsbygoogle" style="display:inline-block;width:780px;height:90px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4286417769"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <p class="small text-muted">版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。</p> </div></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <h4>相关推荐</h4> <hr /><div class="list_con"> <a href="/qqmail/4609871.html" title="QQ邮箱如何发文件给别的邮箱？QQ邮箱发文件给别的邮箱的方法"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-08/08/570dc155753a369e7cec28e6419cd2c0.png" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">QQ邮箱如何发文件给别的邮箱？QQ邮箱发文件给别的邮箱的方法</div> <div class="summary">很多人在工作的时候都需要使用QQ邮箱软件，那么你们晓得QQ邮箱如何发文件给别的邮箱吗?下面这篇文章就为大伙带来了QQ邮箱发文件给别的邮箱的方法，对此感兴趣的用户快来下文看看吧。QQ邮箱发文件给别的邮箱的方法进入</div> <time class="summary">作者：编程之家 时间：2023-08-08</time> </a> </div><div class="list_con"> <a href="/qqmail/4607551.html" title="qq邮箱在手机qq哪里找-手机qq查找qq邮箱的方法"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-05/17/26008276cfe1e7bba55812f9bf691c25.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">qq邮箱在手机qq哪里找-手机qq查找qq邮箱的方法</div> <div class="summary">qq邮箱是很多小伙伴在工作的时候经常用到的工具，那么在这个时候就有用户好奇了qq邮箱在手机qq哪里找呢？现在就和小编来看一下手机qq查找qq邮箱的方法吧。</div> <time class="summary">作者：编程之家 时间：2023-08-05</time> </a> </div><div class="list_con"> <a href="/qqmail/4607544.html" title="epic收不到qq邮箱验证码"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-05/17/cc5d081ae953fb3f98200d595b6cce08.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">epic收不到qq邮箱验证码</div> <div class="summary">epic收不到qq邮箱验证码的原因和解决方法：1、QQ邮箱验证码已过期：如果您的QQ邮箱验证码已过期，您将无法收到新的验证码。您可以尝试重新生成新的验证码并输入到Epic中。2、QQ邮箱验证码被拦截。3、Epic设置问题。4...</div> <time class="summary">作者：编程之家 时间：2023-08-05</time> </a> </div><div class="list_con"> <a href="/qqmail/4607487.html" title="为什么不建议用qq邮箱"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/08-05/17/e331a1a152c68b3f7a59383b46a7dd80.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">为什么不建议用qq邮箱</div> <div class="summary">1、隐私管理差：QQ邮箱的隐私保护不够完善，可能会存在安全隐患。2、功能相对简单：可能无法满足一些高级用户的需求。3、垃圾邮件多：由于QQ邮箱的普及程度较高，很多广告商和垃圾邮件发送者会利用QQ邮箱进行广告推送...</div> <time class="summary">作者：编程之家 时间：2023-08-05</time> </a> </div><div class="list_con"> <a href="/qqmail/4600311.html" title="QQ邮箱APP如何开启夜间模式？"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/06-22/11/a8ee3ae5d2455209d0f32ec112eeb70d.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">QQ邮箱APP如何开启夜间模式？</div> <div class="summary">今天我们就来说说QQ邮箱APP如何开启夜间模式的一些信息。很多朋友对QQ邮箱APP如何开启夜间模式的一些信息感兴趣。边肖今天整理了一些资料，希望对有需要的朋友有所帮助。</div> <time class="summary">作者：编程之家 时间：2023-07-03</time> </a> </div><div class="list_con"> <a href="/qqmail/4599535.html" title="如何在手机QQ邮箱中设置明星邮件"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/06-22/09/08650520f7f795f1d17cd45500363d7c.png" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">如何在手机QQ邮箱中设置明星邮件</div> <div class="summary">今天就来说说手机QQ邮箱如何设置明星邮件的一些信息。很多朋友对这个关于手机QQ邮箱如何设置星邮的信息很感兴趣。边肖今天整理了一些相关资料，希望能帮助到有需要的朋友。</div> <time class="summary">作者：编程之家 时间：2023-07-06</time> </a> </div><div class="list_con"> <a href="/qqmail/4539123.html" title="QQ邮箱地址不存在怎么回事？QQ邮箱地址不存在解决方法"><img class="lazy" src="/images/np.jpg" data-original="/res/2022/11-22/13/b39991be904de1639b0fe2db7a906767.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">QQ邮箱地址不存在怎么回事？QQ邮箱地址不存在解决方法</div> <div class="summary">QQ邮箱是一款功能强大的邮箱管理软件，为用户用户提供安全、稳定、快速、便捷电子邮件服务，使用起来很是实用，但是最近有用户反映在使用时遇到了些问题，提示地址不存在，这是怎么回事呢？针对这一问题，本篇带来了...</div> <time class="summary">作者：编程之家 时间：2023-02-12</time> </a> </div><div class="list_con"> <a href="/qqmail/4536119.html" title="qq邮箱格式怎么填写？qq邮箱格式怎么填写才正确"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/01-29/16/4cd105a4cca84f0b52110ba48b8a87aa.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">qq邮箱格式怎么填写？qq邮箱格式怎么填写才正确</div> <div class="summary">qq邮箱格式怎么写呢?相信有很多小伙伴都还不知道qq邮箱格式的正确填写方式，那么编程之家小编就为大家带来了qq邮箱格式正确填写方式，还不知道小伙伴快来了解一下吧。</div> <time class="summary">作者：编程之家 时间：2023-01-29</time> </a> </div><div class="list_con"> <a href="/qqmail/4528762.html" title="EpicQQ邮箱登录凭证无效怎么办？EpicQQ邮箱登录凭证无效解决方法"><img class="lazy" src="/images/np.jpg" data-original="/res/2022/11-27/21/279ef1856162c06384c58344b25f4861.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">EpicQQ邮箱登录凭证无效怎么办？EpicQQ邮箱登录凭证无效解决方法</div> <div class="summary">很多用户在注册Epic平台账号的时候都是使用QQ邮箱号，有时候在登录的时候是需要进邮箱验证的，这个时候出现了QQ邮箱登录凭证无效的问题，导致登录失败，那么这个问题要怎么处理才能够解决，本期软件教程就来为大伙分...</div> <time class="summary">作者：编程之家 时间：2023-01-09</time> </a> </div><div class="list_con"> <a href="/qqmail/4528761.html" title="Epic QQ邮箱登录凭证无效怎么办？epic qq邮箱凭证无效解决方法"><img class="lazy" src="/images/np.jpg" data-original="/res/2023/01-09/22/1336e96be6fcbd2ac61f4ca29767a5c5.jpg" title="" width="160" height="90" style="float:right;margin-left:30px;" loading="lazy"/><div class="title">Epic QQ邮箱登录凭证无效怎么办？epic qq邮箱凭证无效解决方法</div> <div class="summary">Epic QQ邮箱登录凭证无效怎么办？最近有用户询问这个问题，Epic是一款好用的游戏平台，有些用户是用QQ邮箱注册的，在使用QQ邮箱登录时，遇到了登录凭证无效的情况，应该怎么处理呢？针对这一问题，本篇带来了详细的解...</div> <time class="summary">作者：编程之家 时间：2023-01-09</time> </a> </div></div> </div> </div> </div> <div class="col-sm-12 col-md-12 col-lg-3"> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- jb51-article-300x600 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7541177540"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card" style="padding:20px;"> <label class="main-content-label ">小编推荐</label><ul class="n-list"></ul> </div> </div> </div> <!-- row end --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签<a href="/all" class="pull-right">更多</a> </label> <div class="topcard-tags"><a href="/tag/python/" title="python">python</a><a href="/tag/JavaScript/" title="JavaScript">JavaScript</a><a href="/tag/java/" title="java">java</a><a href="/tag/HTML/" title="HTML">HTML</a><a href="/tag/reactjs/" title="reactjs">reactjs</a><a href="/tag/C/" title="C#">C#</a><a href="/tag/Android/" title="Android">Android</a><a href="/tag/CSS/" title="CSS">CSS</a><a href="/tag/Nodejs/" title="Node.js">Node.js</a><a href="/tag/sql/" title="sql">sql</a><a href="/tag/rp/" title="r">r</a><a href="/tag/python3x/" title="python-3.x">python-3.x</a><a href="/tag/MysqL/" title="MysqL">MysqL</a><a href="/tag/jQuery/" title="jQuery">jQuery</a><a href="/tag/c4343/" title="c++">c++</a><a href="/tag/pandas/" title="pandas">pandas</a><a href="/tag/flutter/" title="Flutter">Flutter</a><a href="/tag/angular/" title="angular">angular</a><a href="/tag/IOS/" title="IOS">IOS</a><a href="/tag/django/" title="django">django</a><a href="/tag/linux/" title="linux">linux</a><a href="/tag/swift/" title="swift">swift</a><a href="/tag/typescript/" title="typescript">typescript</a><a href="/tag/luyouqi/" title="路由器">路由器</a><a href="/tag/JSON/" title="JSON">JSON</a><a href="/tag.php?id=151332" title="路由器设置">路由器设置</a><a href="/tag.php?id=151343" title="无线路由器">无线路由器</a><a href="/tag/h3c/" title="h3c">h3c</a><a href="/tag.php?id=151427" title="华三">华三</a><a href="/tag.php?id=151428" title="华三路由器设置">华三路由器设置</a><a href="/tag.php?id=151429" title="华三路由器">华三路由器</a><a href="/tag.php?id=474667" title="电脑软件教程">电脑软件教程</a><a href="/tag/arrays/" title="arrays">arrays</a><a href="/tag/docker/" title="docker">docker</a><a href="/tag.php?id=474668" title="软件图文教程">软件图文教程</a><a href="/tag/C/" title="C">C</a><a href="/tag/vuejs/" title="vue.js">vue.js</a><a href="/tag/laravel/" title="laravel">laravel</a><a href="/tag/springboot/" title="spring-boot">spring-boot</a><a href="/tag/reactnative/" title="react-native">react-native</a></div> </div> </div> </div> </div> </div> </div> <footer id="footer"> <div class="container" style="width:1440px;"> <div class="row hidden-xs"> <div class="col-sm-12 col-md-9 col-lg-9 site-link"> <ul class="list-inline"> <li>友情链接:</li></ul> <ul class="list-inline"> <li><a href="" title="编程之家">编程之家</a></li>-<li><a href="https://t5m44pq3f7.jiandaoyun.com/f/638ca61b7b079a000a5d2dd6" rel="nofollow" title="我要投稿" target="_blank">我要投稿</a></li>-<li><a target="_blank" rel="nofollow" href="https://t5m44pq3f7.jiandaoyun.com/f/638ca8c69ad234000a79561f" title="广告合作">广告合作</a></li>-<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></li>-<li><a href="/disclaimers.html" title="免责声明">免责声明</a></li>-<li><a href="/sitemap/all/index.xml" title="网站地图" target="_blank">网站地图</a></li> </ul> <div>版权所有 © 2018编程之家<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> <div class="col-sm-12 col-md-3 col-lg-3"><img src="/qrcode.jpg" width="90" alt="微信公众号搜索 “ 程序精选 ” ，选择关注！"> <div class="pull-right">微信公众号搜<span class="text-danger">"智元新知"</span>关注<br />微信扫一扫可直接关注哦！</div> </div> </div> </div> </footer> <script src="/js/count.js"></script> </body> </html>