layer+ autocomplete + ajax实现弹出框模糊查询

1.引入Layer的js文件和css文件、jQuery UI的js文件和css文件，由于jQuery UI是依赖于jQuery的，还需要在引入jQuery UI之前引入jQuery。

2.html代码：

<button type="button" onclick="approval(applicationId,2)">查询</button>

3.js代码：

            function approval(applocationId, status) {
                layer.open({
                    title: [
                        '请选择', 
                        'background-color: #1E9FFF; color:#fff;margin:0;'
                    ],//头部
                    zIndex: 100,//层级
                    content: '<div class="left-style"><label class="laber-style">查询人</label></div><div class="right-style"><input  name="pName1" id="pName1" class="reviewer1"  placeholder="请输入查询人"  /><input type="hidden" name="stepEmp1" id="stepEmp1" /></div>', //弹框内容
                    btn: ['确定', '取消'],
                    success: function() { // 成功弹出层的回调
                        $(".reviewer1").autocomplete({  
                            max:  12 ,     // 列表里的条目数 
                            source: function(request, response) {
                                var info = request.term;
                                var arr = [];
                                $.ajax({
                                    url: "xxx.do",//请求地址
                                    type: "get",//请求方式
                                    dataType: "json",
                                    success: function(data) {
                                        var len = data.length;
                                        var reg = new RegExp(info);
                                        for(var i = 0; i < len; i++) {
                                            if(data[i].empName.match(reg)) {
                                                arr.push(data[i]);
                                            }
                                        }
                                        response($.map(arr, function(item) {
                                            return {
                                                label: item.empName,
                                                value: item.syncEmpId
                                            }
                                        }));
                                    }
                                });

                            },
                            //选择下拉列表时触发
                            focus: function(event, ui) { 
                                $(".reviewer1").val(ui.item.label);
                                $("#stepEmp1").val(ui.item.value);
                                return false;
                            },
                            select: function(event, ui) {
                                $(".reviewer1").val(ui.item.label);
                                $("#stepEmp1").val(ui.item.value);
                                return false;
                            }
                        });
                    },
                    yes: function() { //点击弹出层确定按钮触发的回调函数
                        $.ajax({
                            type: "POST",
                            url: "xxx.do",
                            data: {
                                applicationId: applocationId,
                                appStatus: status
                            },
                            success: function(data) {
                                
                            }
                        });

                    }
                });

            }

 

2.