之前因为项目开发需要，对于收件人选择与搜索的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 】

相关推荐： 如何确保西部建站助手FTP传输的安全性？  如何自定义建站之星模板颜色并下载新样式？  Laravel怎么处理异常_Laravel自定义异常处理与错误页面教程  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  Laravel怎么使用Intervention Image库处理图片上传和缩放  C语言设计一个闪闪的圣诞树  个人摄影网站制作流程,摄影爱好者都去什么网站？  PHP正则匹配日期和时间(时间戳转换)的实例代码  Laravel如何使用Eloquent进行子查询  原生JS获取元素集合的子元素宽度实例  中山网站推广排名,中山信息港登录入口？  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  JavaScript如何实现倒计时_时间函数如何精确控制  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  如何快速选择适合个人网站的云服务器配置？  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  如何挑选优质建站一级代理提升网站排名？  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  微信公众帐号开发教程之图文消息全攻略  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  如何自定义建站之星网站的导航菜单样式？  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  如何在建站之星网店版论坛获取技术支持？  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  Android仿QQ列表左滑删除操作  Laravel模型事件有哪些_Laravel Model Event生命周期详解  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  详解Android图表 MPAndroidChart折线图  中国移动官方网站首页入口 中国移动官网网页登录  如何确认建站备案号应放置的具体位置？  zabbix利用python脚本发送报警邮件的方法  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  Laravel如何使用查询构建器？（Query Builder高级用法）  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  JavaScript如何实现错误处理_try...catch如何捕获异常？  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  Laravel如何发送系统通知？（Notification渠道示例）  Laravel如何使用Vite进行前端资源打包？（配置示例）  公司门户网站制作流程,华为官网怎么做？  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】