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


Posted in Javascript onFebruary 10, 2017

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

页面截图:

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

主要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>

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

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
vue中轮训器的使用
Jan 27 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
BootStrapValidator初使用教程详解
Feb 10 #Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 #Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 #Javascript
JS实现的数字格式化功能示例
Feb 10 #Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 #Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 #Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 #Javascript
You might like
Symfony2 session用法实例分析
2016/02/04 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
回调函数的意义以及python实现实例
2017/06/20 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
与UNIX有关的几个名词
2015/09/17 面试题
电脑教师的教学自我评价
2013/11/26 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记