指定发送到个人或多人（有点类似qq的创建多人聊天）带有搜索框

来源：互联网发布：波音737max10数据编辑：程序博客网时间：2024/04/28 02:41
话不多少，直接上图看效果：
接下来我们来看看源码：
// 查询学生$('.search-student-icon').click(function () {    var a = $(this).parents('.search-student').find('.placeholder-input').val();    // alert(i);    if(a != ""){//如果查询内容为空则不进行查询操作            //使用正则表达式来匹配            var reg=new RegExp(a);                    //如果匹配到班级名则进行显示班级里的全部学生人数                    var stu_html = '';                    //通过循环来进行遍历查找                    for (var i = 0; i < self.classes.length; i++) {                        var b=self.classes[i].Title;                        if (b.match(reg)) {                            stu_html += '<div class="select-class-box">' +                                '   <div class="select-class-title">' +                                '       <i class="select-class-icon"></i>' +                                '       <span class="select-class-name">' + self.classes[i].Title + '</span>' +                                '   </div>' +                                '   <ul class="select-student-list">';                            if (self.stus[i].length > 0) {                                for (var j = 0; j < self.stus[i].length; j++) {                                    stu_html += '       <li data-id="' + self.stus[i][j].Id + '">' +                                        '           <img src="http://www.yixuexiao.cn//avator/' + self.stus[i][j].Id + '/30?avator=" class="select-img">' +                                        '           <span class="select-name">' + self.stus[i][j].DisplayName + '</span>' +                                        '       </li>';                                }                            }                            stu_html += '   </ul>' +                                '</div>';                        }else{                            //匹配学生                            if (self.stus[i].length > 0) {                                var num=0;                                for (var j = 0; j < self.stus[i].length; j++) {                                    var stu=self.stus[i][j].DisplayName;                                    //匹配上的话                                    if(stu.match(reg)){                                        //是否要添加班级名,第一次匹配上要添加班级名                                        if(num==0){                                            stu_html += '<div class="select-class-box">' +                                                '   <div class="select-class-title">' +                                                '       <i class="select-class-icon"></i>' +                                                '       <span class="select-class-name">' + self.classes[i].Title + '</span>' +                                                '   </div>' +                                                '   <ul class="select-student-list">';                                            num++;                                        }                                    stu_html += '       <li data-id="' + self.stus[i][j].Id + '">' +                                        '           <img src="http://www.yixuexiao.cn//avator/' + self.stus[i][j].Id + '/30?avator=" class="select-img">' +                                        '           <span class="select-name">' + self.stus[i][j].DisplayName + '</span>' +                                        '       </li>';                                    }                                }                            }                            stu_html += '   </ul>' +                                '</div>';                        }                    }                    $('.select-list').html(stu_html);                    layer.close(index);                    //指定学生选择列表班级展开                    $(".select-class-box").on("click", ".select-class-title", function () {                        if ($(this).is('.open')) {                            $(this).removeClass('open');                            $(this).siblings(".select-student-list").slideUp();                        } else {                            $(".select-class-box .select-class-title").removeClass('open');                            $(".select-class-box .select-student-list").slideUp();                            $(this).addClass('open');                            $(this).siblings(".select-student-list").slideDown();                        }                    });                   //指定学生选择列表学生选中                   $(".select-class-box .select-student-list").on("click", "li", function () {            if (!$(this).is('.select')) {                $(this).addClass('select add');            } else if ($(this).is('.add')) {                $(this).removeClass('select add');            }        });                 /* $(".select-list li").on("click","li",function(){                      if (!$(this).is('.select')) {                          $(this).addClass('select add');                      } else if ($(this).is('.add')) {                          $(this).removeClass('select add');                      }                  });*/                 //遍历查看右侧是否有选中                   $('.send-window-right li').each(function () {                       var rid=$(this).attr('data-id');                       $('.select-student-list li').each(function(){                           var lid=$(this).attr('data-id');                           if (rid===lid) {                             //  alert(rid+"==="+lid);                               $(this).addClass('select');                           }                       })                 })                   //指定学生选择                   $('.send-window-middle').click(function () {            var imgArray = new Array;//创建图片数组            var nameArray = new Array;//创建学生名字数组            var idArray = new Array;//创建id数组            //遍历选中元素            $(".select-student-list li.add").each(function (index, doDom) {                imgArray[index] = $(doDom).find('.select-img').attr("src");//存储图片地址                nameArray[index] = $(doDom).find('.select-name').html();//姓名                idArray[index] = $(doDom).attr('data-id');//id            });            //alert(nameArray.length);            //添加到右侧栏目            for (var ia = 0; ia < imgArray.length; ia++) {                //alert(imgArray[ia]);                $('.selected-list ul').append('<li data-id="'+idArray[ia]+'"><a class="del-selected"></a><img src="'+imgArray[ia]+'" class="selected-img"/><span class="selected-name">'+ nameArray[ia]+'</span></li>');            };            $(".send-window-left li").removeClass('add');            //计算选中学生            var selectedStu = $('.selected-list ul li').length;            $('.selected-number').html("已选联系人：" + selectedStu + "人");        });                  //右栏删除已选中学生                   $('.selected-list').on("click", "li .del-selected", function () {            var dataId = $(this).closest('li').attr('data-id');            $(this).closest('li').remove();            //遍历删除左侧选中            $('.send-window-left li').each(function () {                var selected = ($(this).attr('data-id') == dataId);                if (selected) {                    $(this).removeClass('select');                }            })            //计算选中学生            var selectedStu = $('.selected-list ul li').length;            $('.selected-number').html("已选联系人：" + selectedStu + "人");        });        }else{            //显示全部班级的内容        var stu_html = '';        //通过循环来进行遍历查找        for (var i = 0; i < self.classes.length; i++) {                stu_html += '<div class="select-class-box">' +                    '   <div class="select-class-title">' +                    '       <i class="select-class-icon"></i>' +                    '       <span class="select-class-name">' + self.classes[i].Title + '</span>' +                    '   </div>' +                    '   <ul class="select-student-list">';                if (self.stus[i].length > 0) {                    for (var j = 0; j < self.stus[i].length; j++) {                        stu_html += '       <li data-id="' + self.stus[i][j].Id + '">' +                            '           <img src="http://www.yixuexiao.cn//avator/' + self.stus[i][j].Id + '/30?avator=" class="select-img">' +                            '           <span class="select-name">' + self.stus[i][j].DisplayName + '</span>' +                            '       </li>';                    }                }                stu_html += '   </ul>' +                    '</div>';        }        $('.select-list').html(stu_html);        layer.close(index);        //指定学生选择列表班级展开        $(".select-class-box").on("click", ".select-class-title", function () {            if ($(this).is('.open')) {                $(this).removeClass('open');                $(this).siblings(".select-student-list").slideUp();            } else {                $(".select-class-box .select-class-title").removeClass('open');                $(".select-class-box .select-student-list").slideUp();                $(this).addClass('open');                $(this).siblings(".select-student-list").slideDown();            }        });        //指定学生选择列表学生选中        $(".select-class-box .select-student-list").on("click", "li", function () {            if (!$(this).is('.select')) {                $(this).addClass('select add');            } else if ($(this).is('.add')) {                $(this).removeClass('select add');            }        });        //指定学生选择        $('.send-window-middle').click(function () {            var imgArray = new Array;//创建图片数组            var nameArray = new Array;//创建学生名字数组            var idArray = new Array;//创建id数组            //遍历选中元素            $(".select-student-list li.add").each(function (index, doDom) {                imgArray[index] = $(doDom).find('.select-img').attr("src");//存储图片地址                nameArray[index] = $(doDom).find('.select-name').html();//姓名                idArray[index] = $(doDom).attr('data-id');//id            });            //alert(nameArray.length);            //添加到右侧栏目            for (var ia = 0; ia < imgArray.length; ia++) {                //alert(imgArray[ia]);                $('.selected-list ul').append('<li data-id="'+idArray[ia]+'"><a class="del-selected"></a><img src="'+imgArray[ia]+'" class="selected-img"/><span class="selected-name">'+ nameArray[ia]+'</span></li>');            };            $(".send-window-left li").removeClass('add');            //计算选中学生            var selectedStu = $('.selected-list ul li').length;            $('.selected-number').html("已选联系人：" + selectedStu + "人");        });        //遍历查看右侧是否有选中        $('.send-window-right li').each(function () {            var rid=$(this).attr('data-id');            $('.select-student-list li').each(function(){                var lid=$(this).attr('data-id');                if (rid===lid) {                    //  alert(rid+"==="+lid);                    $(this).addClass('select');                }            })        })        //右栏删除已选中学生        $('.selected-list').on("click", "li .del-selected", function () {            var dataId = $(this).closest('li').attr('data-id');            $(this).closest('li').remove();            //遍历删除左侧选中            $('.send-window-left li').each(function () {                var selected = ($(this).attr('data-id') == dataId);                if (selected) {                    $(this).removeClass('select');                }            })            //计算选中学生            var selectedStu = $('.selected-list ul li').length;            $('.selected-number').html("已选联系人：" + selectedStu + "人");        });        }});
0 0