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

页面截图：

主要html代码：

<#--左侧-->
<div>
 <label>To:</label>
 <div id="divtxt" class="mailtxt_div"></div>
 <input type="hidden" name="messName" id="messName"/>
 <input type="hidden" name="messId" id="messId"/>
</div>
<div>
 <label>Subject:</label>
 <input type="text" name="messTitle" id="messTitle"/>
</div>
<div>
 <label>Message:</label>
 <textarea name="ddContent" id="ddContent"></textarea>
</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="aa@qq.com" 
    ass="Cata food, S.L.">Cata food, S.L.</div>
  </li>
  <li>
   <div class="firstmail" title="Anqing Beverage" alt="bb@qq.com" 
    ass="Anqing Beverage">Anqing Beverage</div>
  </li>
  <li>
   <div class="firstmail" title="123456ew" alt="cc@qq.com" 
    ass="123456ew">123456ew</div>
  </li>
 </ul>
</div>

主要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());//隐藏的收件人名称
  });
  
  //点击某个收件人，添加样式
   $(".rece").live("click",function(){
    $("#divtxt").find(".rece").removeClass("on");
    $("#divtxt").find(".rece").css("background-color","").css("color","")
    $(this).addClass("on").css("background-color", "#545f59").css("color","#fff");
   });
  
  //点击删除键跟退格键，删除对应的收件人
  $(document).bind('keydown',
  function(event) {
    var $messId=$("#messId").val();//收件人Id的值
    var $span_alt=$("#divtxt .on").attr("alt");//选中的收件人
    if($span_alt != null){
    var $index,$span_size,$mess_size,$val;
    $index=$messId.indexOf($span_alt);
    $span_size=$span_alt.length;
    $mess_size=$messId.length;
    //删除对应的收件人Id
    $val=$messId.substring(0,$index)
     +$messId.substring($index+$span_size,$mess_size);
    $("#messId").val($val);
    if(46==event.keyCode ){ //Delete键    
     $("#divtxt .on").remove();
     $("#messName").val($("#divtxt").text());    
    }else if(8==event.keyCode){//退格键
     $("#divtxt .on").remove();
     $("#messName").val($("#divtxt").text());
     return false;
    }
   }  
  }
 );
 
 //搜索框搜索事件
 $(".search_mail").bind("blur",function(){
   var content = $(this).val();
   if("Search Contact..." != content && content !=""){
    $(".mailclist li div").each(function(){
     var name = $(this).text();
     if(name.indexOf(content) == -1){
      $(this).hide();
     }else{
      $(this).show();
     }
    });
   } else {
    $(".mailclist li div").show();
   }
  });
});
</script>

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

# js仿QQ邮箱收件人选择  # js仿QQ邮箱收件人搜索  # js邮箱收件人选择与搜索  # js输入框邮箱自动提示功能代码实现  # 仿新浪微博登陆邮箱提示效果的js代码  # JavaScript输入邮箱自动提示实例代码  # 一个仿微博登陆邮箱提示框js开发案例  # JS实现提交表单前的数字及邮箱校检功能  # JavaScript实现邮箱地址自动匹配功能代码  # JavaScript 文本框下拉提示(自动提示)  # JS仿百度自动下拉框模糊匹配提示  # javascript实现下拉提示选择框  # javascript仿百度输入框提示自动下拉补全  # JS实现的邮箱提示补全效果示例  # 若不  # 框中  # 大家多多  # img  # src  # images  # txtsearch  # Search  # search_mail  # calss  # onblur  # onclick  # Contact  # png  # qq  # aa  # alt  # Beverage  # Anqing  # ass 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何获取上海专业网站定制建站电话？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  Swift中循环语句中的转移语句 break 和 continue  如何快速上传建站程序避免常见错误？  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  Linux网络带宽限制_tc配置实践解析【教程】  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  微信小程序 canvas开发实例及注意事项  Laravel如何配置和使用缓存？（Redis代码示例）  如何在阿里云虚拟主机上快速搭建个人网站？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  实例解析Array和String方法  android nfc常用标签读取总结  Laravel distinct去重查询_Laravel Eloquent去重方法  MySQL查询结果复制到新表的方法(更新、插入)  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  如何用已有域名快速搭建网站？  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  活动邀请函制作网站有哪些,活动邀请函文案？  如何快速搭建支持数据库操作的智能建站平台？  iOS UIView常见属性方法小结  如何在七牛云存储上搭建网站并设置自定义域名？  如何在IIS服务器上快速部署高效网站？  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  Windows Hello人脸识别突然无法使用  海南网站制作公司有哪些,海口网是哪家的？  Laravel如何为API编写文档_Laravel API文档生成与维护方法  html5的keygen标签为什么废弃_替代方案说明【解答】  Laravel如何生成URL和重定向？（路由助手函数）  iOS正则表达式验证手机号、邮箱、身份证号等  ,在苏州找工作，上哪个网站比较好？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  如何在阿里云购买域名并搭建网站？  ,交易猫的商品怎么发布到网站上去？  Java类加载基本过程详细介绍  Laravel如何自定义错误页面（404, 500）？（代码示例）  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  laravel怎么使用数据库工厂（Factory）生成带有关联模型的数据_laravel Factory生成关联数据方法  如何为不同团队 ID 动态生成多个“认领值班”按钮  如何在VPS电脑上快速搭建网站？  手机软键盘弹出时影响布局的解决方法  Laravel如何使用Vite进行前端资源打包？（配置示例）  高端云建站费用究竟需要多少预算？  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程