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

话不多少，直接上图看效果：

接下来我们来看看源码：

// 查询学生
$('.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 + "人");
        });
        }
});