本文主要是介绍纯js实现Autocomplete，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Zr.add("./js/audit/audit-page", function (zr, $, picker, tables,message,modal,commonUtil,erpAutocomplete) {var state;//状态为1的时候只能查看，为2的时候可以更新var area_value;//区域值var province_value;//省值var city_value;//城市值var main = {//弹窗列表中的下拉项initAcciden:function(){main.eventInit.normaldatePickerInit(); main.eventInit.selectedInit.initAreaAccident();main.eventInit.selectedInit.initNormalDataDict();},//查询列表中的下拉项init: function init() {main.eventInit.modalInit();main.eventInit.datePickerInit();main.eventInit.selectedInit.initDataDict();main.eventInit.selectedInit.initArea();main.eventInit.buttonEventInit();main.eventInit.dataTableInit();},openWindow: function(result){var wTitle;if(!result){ //新增窗口初始化wTitle = '新增稽核记录';$('#wTitle').html(wTitle);$("a.addProImg").click((function() {var sasp = '<div class="zr-row-flex saspDiv"><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">涉案商品：</span><span class="zr-form-area"><input placeholder="请输入涉案商品" class="zr-input" id="add_productName" name="productName" /></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">商品型号：</span><span class="zr-form-area"><input placeholder="请输入商品型号" class="zr-input" id="add_productModel" name="productModel"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">商品数量：</span><span class="zr-form-area"><input placeholder="请输入商品数量" class="zr-input" id="add_productCount" name="productCount"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><a class="addProImgList"><img src="../../static/img/sub.png" title="删除" style="width:14px;height:14px;" /></a></div></div>';//加入列表$("#qymc").append(sasp);$(".addProImgList").css('cursor','pointer');//定义减号事件,删除当前行$(".addProImgList").click(function(){$(this).parent().parent().remove();})}));modalWindow.show(); } else { //编辑窗口初始化var data = result.data;area_value = data.area;province_value = data.province;city_value = data.city;var products;if(data.products!="" && data.products!=null){products = JSON.parse(data.products);}else{var products =[];}var url ="/audit/add";var title1="";$('form[name="my_form"]').empty();$.ajax({ url: url , type: 'POST',async: false, cache: false, success: function (result) {$(".zr-modal-body").html(result);//状态为1的时候只能查看，为2的时候可以更新if(state ==1){title1="查看稽核记录";$('form[name="my_form"] select[name!="areaSearch"]' ).attr('disabled','disabled');$('form[name="my_form"] select[name!="provinceSearch"]' ).attr('disabled','disabled');$('form[name="my_form"] select[name!="citySearch"]' ).attr('disabled','disabled');for(var i=0;i<products.length;i++){if(i==0){$("#add_productName").val(products[i].productName);$("#add_productModel").val(products[i].productModel);$("#add_productCount").val(products[i].productCount);}else{var sasp = '<div class="zr-row-flex saspDiv"><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">涉案商品：</span><span class="zr-form-area"><input placeholder="请输入涉案商品" class="zr-input" id="add_productName" name="productName" value="'+ products[i].productName +'"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">商品型号：</span><span class="zr-form-area"><input placeholder="请输入商品型号" class="zr-input" id="add_productModel" name="productModel" value="' + products[i].productModel+ '"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">商品数量：</span><span class="zr-form-area"><input placeholder="请输入商品数量" class="zr-input" id="add_productCount" name="productCount" value="' + products[i].productCount + '"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><a class="addProImgList"><img src="../../static/img/sub.png" title="删除" style="width:14px;height:14px;" /></a></div></div>';$("#qymc").append(sasp);}}$('form[name="my_form"] input,textarea' ).attr('disabled','disabled');//查看状态不能显示底部的保存按钮，隐藏。$("#saveButton").hide();}else{title1="编辑稽核记录";for(var i=0;i<products.length;i++){if(i==0){$("#add_productName").val(products[i].productName);$("#add_productModel").val(products[i].productModel);$("#add_productCount").val(products[i].productCount);}else{var sasp = '<div class="zr-row-flex saspDiv"><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">涉案商品：</span><span class="zr-form-area"><input placeholder="请输入涉案商品" class="zr-input" id="add_productName" name="productName" value="'+ products[i].productName +'"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">商品型号：</span><span class="zr-form-area"><input placeholder="请输入商品型号" class="zr-input" id="add_productModel" name="productModel" value="' + products[i].productModel+ '"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">商品数量：</span><span class="zr-form-area"><input placeholder="请输入商品数量" class="zr-input" id="add_productCount" name="productCount" value="' + products[i].productCount + '"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><a class="addProImgList"><img src="../../static/img/sub.png" title="删除" style="width:14px;height:14px;" /></a></div></div>'; //加入列表$("#qymc").append(sasp);$(".addProImgList").css('cursor','pointer');//定义减号事件,删除当前行$(".addProImgList").click(function(){$(this).parent().parent().remove();})}}$("a.addProImg").click((function() {var sasp = '<div class="zr-row-flex saspDiv"><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">涉案商品：</span><span class="zr-form-area"><input placeholder="请输入涉案商品" class="zr-input" id="add_productName" name="productName" /></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">商品型号：</span><span class="zr-form-area"><input placeholder="请输入商品型号" class="zr-input" id="add_productModel" name="productModel"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><label class="zr-form-item"><span class="zr-form-label">商品数量：</span><span class="zr-form-area"><input placeholder="请输入商品数量" class="zr-input" id="add_productCount" name="productCount"/></span></label></div><div class="zr-col-lg-6 zr-col-sm-12 zr-col-xs-24"><a class="addProImgList"><img src="../../static/img/sub.png" title="删除" style="width:14px;height:14px;" /></a></div></div>';//加入列表$("#qymc").append(sasp);$(".addProImgList").css('cursor','pointer');//定义减号事件,删除当前行$(".addProImgList").click(function(){$(this).parent().parent().remove();})}));//修改状态显示底部的保存按钮。$("#saveButton").show();}//初始化弹窗中的列表项main.initAcciden();main.eventInit.selectedInit.accidentprovinceNormal(area_value);main.eventInit.selectedInit.accidentcityNormal(province_value);//清空省、市、终端的下拉值，便于重新选择定位province_value='';city_value='';}});//$("#add_no").val(data.no);title1 = title1 + "("+data.no+")";$("#accident_id").val(data.id);$("#add_person").val(data.person);$("#add_person_name").val(data.personName);$("#time").val(zr.tools.format('yyyy-MM-dd hh:mm:ss', new Date(data.time)));$(":radio[name='isCctv'][value='" + data.isCctv + "']").attr("checked", "checked");if(state ==1){$('form[name="my_form"] input[type=radio]' ).attr('disabled','disabled');}$("#caseDate").val(zr.tools.format('yyyy-MM-dd hh:mm:ss', new Date(data.caseDate)));$("#add_casePrice").val(data.casePrice);$("#add_caseMode").val(data.caseMode);$("#add_caseDescribe").val(data.caseDescribe);$("#settlecaseDate").val(zr.tools.format('yyyy-MM-dd hh:mm:ss', new Date(data.settlecaseDate)));$("#add_reduceCost").val(data.reduceCost);$("#add_insidePunishCount").val(data.insidePunishCount);$("#add_externalPunishCount").val(data.externalPunishCount);$("#add_investigationPerson").val(data.investigationPerson);$("#add_rectificationAdvice").val(data.rectificationAdvice);$("#add_savePrice").val(data.savePrice);commonUtil.handlePostRequest("/audit/getDictData", {}, function(result){var firstOrgList = result.CASE_DEPARTMENT_ONE;//一级机构var secondOrgList = result.CASE_DEPARTMENT_TWO;//二级机构var thirdOrgList = result.ACCIDENT_DEPARTMENT_THREE;//三级机构var inOutList = result.INTERNAL_OUT;//内外部案件var postList = result.INVOLVED_PERSON_DUTY;//岗位var postLevelList = result.POST_LEVEL;//职级var sourceList = result.CASE_SOURCE_WAY;//来源途径var natureList = result.CASE_NATURE;//案件性质var investigateResultList = result.INVESTIGATE_RESULT;//调查结果var processResultList = result.PROCESS_RESULT;//处理结果if(secondOrgList && secondOrgList.length > 0){var $_secondOrg = $("#add_secondOrg");$_secondOrg.empty();for(var i=0; i<secondOrgList.length; i++){if(data.secondOrg == secondOrgList[i].id){$_secondOrg.append('<option value="'+secondOrgList[i].id+'" selected = "selected">'+secondOrgList[i].enumName+'</option>');} else {$_secondOrg.append('<option value="'+secondOrgList[i].id+'">'+secondOrgList[i].enumName+'</option>');}}} if(thirdOrgList && thirdOrgList.length > 0){var $_thirdOrgList = $("#add_thirdOrg");$_thirdOrgList.empty(); for(var i=0; i<thirdOrgList.length; i++){if(data.thirdOrg == thirdOrgList[i].id){$_thirdOrgList.append('<option value="'+thirdOrgList[i].id+'" selected = "selected">'+thirdOrgList[i].enumName+'</option>');} else {$_thirdOrgList.append('<option value="'+thirdOrgList[i].id+'">'+thirdOrgList[i].enumName+'</option>');}}} if(inOutList && inOutList.length > 0){var $_inOut = $("#add_inOut");$_inOut.empty(); for(var i=0; i<inOutList.length; i++){if(data.inOuts == inOutList[i].id){$_inOut.append('<option value="'+inOutList[i].id+'" selected = "selected">'+inOutList[i].enumName+'</option>');} else {$_inOut.append('<option value="'+inOutList[i].id+'">'+inOutList[i].enumName+'</option>');}}} if(postList && postList.length > 0){var $_post = $("#add_post");$_post.empty(); for(var i=0; i<postList.length; i++){if(data.post == postList[i].id){$_post.append('<option value="'+postList[i].id+'" selected = "selected">'+postList[i].enumName+'</option>');} else {$_post.append('<option value="'+postList[i].id+'">'+postList[i].enumName+'</option>');}}} if(firstOrgList && firstOrgList.length > 0){var $_firstOrg = $("#add_firstOrg");$_firstOrg.empty(); for(var i=0; i<firstOrgList.length; i++){if(data.firstOrg == firstOrgList[i].id){$_firstOrg.append('<option value="'+firstOrgList[i].id+'" selected = "selected">'+firstOrgList[i].enumName+'</option>');} else {$_firstOrg.append('<option value="'+firstOrgList[i].id+'">'+firstOrgList[i].enumName+'</option>');}}} if(postLevelList && postLevelList.length > 0){var $_postLevel = $("#add_postLevel");$_postLevel.empty(); for(var i=0; i<postLevelList.length; i++){if(data.postLevel == postLevelList[i].id){$_postLevel.append('<option value="'+postLevelList[i].id+'" selected = "selected">'+postLevelList[i].enumName+'</option>');} else {$_postLevel.append('<option value="'+postLevelList[i].id+'">'+postLevelList[i].enumName+'</option>');}}} if(sourceList && sourceList.length > 0){var $_source = $("#add_source");$_source.empty(); for(var i=0; i<sourceList.length; i++){if(data.source == sourceList[i].id){$_source.append('<option value="'+sourceList[i].id+'" selected = "selected">'+sourceList[i].enumName+'</option>');} else {$_source.append('<option value="'+sourceList[i].id+'">'+sourceList[i].enumName+'</option>');}}} if(natureList && natureList.length > 0){var $_nature = $("#add_nature");$_nature.empty(); for(var i=0; i<natureList.length; i++){if(data.nature == natureList[i].id){$_nature.append('<option value="'+natureList[i].id+'" selected = "selected">'+natureList[i].enumName+'</option>');} else {$_nature.append('<option value="'+natureList[i].id+'">'+natureList[i].enumName+'</option>');}}} if(investigateResultList && investigateResultList.length > 0){var $_investigateResult = $("#add_investigateResult");$_investigateResult.empty(); for(var i=0; i<investigateResultList.length; i++){if(data.investigateResult == investigateResultList[i].id){$_investigateResult.append('<option value="'+investigateResultList[i].id+'" selected = "selected">'+investigateResultList[i].enumName+'</option>');} else {$_investigateResult.append('<option value="'+investigateResultList[i].id+'">'+investigateResultList[i].enumName+'</option>');}}} if(processResultList && processResultList.length > 0){var $_processResult = $("#add_processResult");$_processResult.empty(); for(var i=0; i<processResultList.length; i++){if(data.processResult == processResultList[i].id){$_processResult.append('<option value="'+processResultList[i].id+'" selected = "selected">'+processResultList[i].enumName+'</option>');} else {$_processResult.append('<option value="'+processResultList[i].id+'">'+processResultList[i].enumName+'</option>');}}} });$('#wTitle').html(title1);modalWindow.show(); }$('#add_person').bind('input propertychange', function() {erpAutocomplete.handleAutocomplete($('#add_person').val(),'add_person','person-autocomplete',main.eventInit.addPersonSelectChanged)});$('#add_investigationPerson').bind('input propertychange', function() {erpAutocomplete.handleAutocomplete($('#add_investigationPerson').val(),'deptManager','investigationPerson-autocomplete',main.eventInit.investigationPersonSelectChanged)});},eventInit: {//初始化耗损挽回弹出窗modalInit: function(){modalWindow = modal.init(".zr-modal-size-lg", {top:"",openCallback:function(){},closeCallback:function(){}}); },datePickerInit: function() {picker.init({target:"#date-1",type:"normal"});picker.init({target:"#date-2",type:"normal"});picker.init({target:"#date-3",type:"normal"});picker.init({target:"#date-4",type:"normal"});},//初始化耗损挽回时间控件normaldatePickerInit: function() {picker.init({target:"#time",type:"datetime"});picker.init({target:"#caseDate",type:"datetime"});picker.init({target:"#settlecaseDate",type:"datetime"});picker.init({target:"#investigatorDate",type:"datetime"});},//使用数据字典初始化弹窗的下拉列表selectedInit:{initNormalDataDict:function(){$.ajax({type: 'POST',async: false, url: "/audit/getDictData",cache : false,dataType: "json",success: function(result) {//是否CCTV使用var cctvTitle = ""; $.each(result.SAVE_IS_CCTV,function(i,e){cctvTitle = cctvTitle + '<input name="isCctv" type="radio" value="' + e.id +'" /><span>' + e.enumName + ' </span>';})$(".iscctv").html(cctvTitle);$(":radio[name='isCctv']:last").attr("checked", "checked");//一级机构$.each(result.CASE_DEPARTMENT_ONE,function(i,e){$("#add_firstOrg").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//二级机构$.each(result.CASE_DEPARTMENT_TWO,function(i,e){$("#add_secondOrg").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//三级机构$.each(result.ACCIDENT_DEPARTMENT_THREE,function(i,e){$("#add_thirdOrg").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//内、外部案件$.each(result.INTERNAL_OUT,function(i,e){$("#add_inOut").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//岗位$.each(result.INVOLVED_PERSON_DUTY,function(i,e){$("#add_post").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//职级$.each(result.POST_LEVEL,function(i,e){$("#add_postLevel").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//途径来源$.each(result.CASE_SOURCE_WAY,function(i,e){$("#add_source").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//案件性质$.each(result.CASE_NATURE,function(i,e){$("#add_nature").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//调查结果$.each(result.INVESTIGATE_RESULT,function(i,e){$("#add_investigateResult").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//处理结果$.each(result.PROCESS_RESULT,function(i,e){$("#add_processResult").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})},error: function(XMLHttpRequest, textStatus, errorThrown) {alert("查询失败");}});},//使用数据字典初始化查询的下拉列表initDataDict:function(){$.ajax({type: 'POST',url: "/audit/getDictData",cache : false,dataType: "json",success: function(result) {//一级机构$.each(result.CASE_DEPARTMENT_ONE,function(i,e){$("select[name='firstOrg']").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//二级机构$.each(result.CASE_DEPARTMENT_TWO,function(i,e){$("select[name='secondOrg']").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//三级机构$.each(result.ACCIDENT_DEPARTMENT_THREE,function(i,e){$("select[name='thirdOrg']").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//内外部案件$.each(result.INTERNAL_OUT,function(i,e){$("select[name='inOut']").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//案件性质$.each(result.CASE_NATURE,function(i,e){$("select[name='nature']").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//来源途径$.each(result.CASE_SOURCE_WAY,function(i,e){$("select[name='source']").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//调查结果$.each(result.INVESTIGATE_RESULT,function(i,e){$("select[name='investigateResult']").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//涉案人岗位$.each(result.INVOLVED_PERSON_DUTY,function(i,e){$("select[name='post']").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})//涉案人级别$.each(result.POST_LEVEL,function(i,e){$("select[name='postLevel']").append("<option value='"+e.id+"'>"+e.enumName+"</option>");})},error: function(XMLHttpRequest, textStatus, errorThrown) {alert("查询失败");}});},//初始化区域列表initArea:function(){$.ajax({type: 'POST',url: "/province/queryArea",cache : false,dataType: "json",success: function(result) {for(var i = 0; i < result.length; i++){$("select[name='areaSearch']").append("<option value='"+result[i].id+"'>"+result[i].regionName+"</option>");//新增}$("select[name='areaSearch']").on('change',function(){if($(this).val()!=''){main.eventInit.selectedInit.accidentprovince($(this));}else{$("select[name='provinceSearch']").empty();$("select[name='provinceSearch']").append("<option value=''>请选择</option>");}});},error: function(XMLHttpRequest, textStatus, errorThrown) {alert("查询失败");}});},//初始化区域initAreaAccident:function(){$.ajax({type: 'POST',cache : false,url: "/province/queryArea",success: function(result) {$("#add_area").empty(); for(var i = 0; i < result.length; i++){if(area_value == result[i].id){$("#add_area").append("<option value='"+result[i].id+"' selected = 'selected'>"+result[i].regionName+"</option>");//新增}else{$("#add_area").append("<option value='"+result[i].id+"'>"+result[i].regionName+"</option>");//新增}}$("#add_area").on('change',function(){if($(this).val()!=''){main.eventInit.selectedInit.accidentprovinceNormal($(this).val());}else{$("#add_province").empty();$("#add_province").append("<option value=''>请选择</option>");}});},error: function(XMLHttpRequest, textStatus, errorThrown) {alert("查询失败");}});},//根据区域value获取相关省份名称accidentprovince:function(obj){//$("#province").empty();$.ajax({type: 'POST',url: "/province/queryAllProvinceList",cache : false,data: "regionId=" +obj.val(),dataType: "json",success: function(result) {$("select[name='provinceSearch']").empty();if(result.length>0){$("select[name='provinceSearch']").append("<option value=''>请选择</option>");//新增for(var i = 0; i < result.length; i++){$("select[name='provinceSearch']").append("<option value='"+result[i].id+"'>"+result[i].province+"</option>");//新增}}else{$("select[name='provinceSearch']").append("<option value=''>请选择</option>");//新增}$("select[name='provinceSearch']").on('change',function(){if($(this).val()!=''){main.eventInit.selectedInit.accidentcity($(this));}else{$("select[name='citySearch']").empty();$("select[name='citySearch']").append("<option value=''>请选择</option>");}});},error: function(XMLHttpRequest, textStatus, errorThrown) {}});},//根据区域value获取相关省份名称(新增)accidentprovinceNormal:function(obj){$.ajax({type: 'POST',url: "/province/queryAllProvinceList",cache : false,async: false, data: "regionId=" +obj,dataType: "json",success: function(result) {$("#add_province").empty();$("#add_province").append("<option value=''>请选择</option>");if(result.length>0){ for(var i = 0; i < result.length; i++){if(province_value ==result[i].id ){$("#add_province").append("<option value='"+result[i].id+"' selected='selected'>"+result[i].province+"</option>");//新增}else{$("#add_province").append("<option value='"+result[i].id+"'>"+result[i].province+"</option>");//新增}}}$("#add_province").on('change',function(){if($(this).val()!=''){main.eventInit.selectedInit.accidentcityNormal($(this).val());}else{$("#add_city").empty();$("#add_city").append("<option value=''>请选择</option>");}});},error: function(XMLHttpRequest, textStatus, errorThrown) {}});},//根据省份value获取相关城市名称accidentcity:function(obj){$.ajax({type: 'POST',url: "/province/queryAllCityList",cache : false,data: "provinceId=" +obj.val(),dataType: "json",success: function(result) {$("select[name='citySearch']").empty();if(result.length>0){$("select[name='citySearch']").append("<option value=''>请选择</option>");//新增for(var i = 0; i < result.length; i++){$("select[name='citySearch']").append("<option value='"+result[i].id+"'>"+result[i].cityName+"</option>");//新增}}else{$("select[name='citySearch']").append("<option value=''>请选择</option>");//新增}},error: function(XMLHttpRequest, textStatus, errorThrown) {}});},//根据省份value获取相关城市名称(新增)accidentcityNormal:function(obj){$.ajax({type: 'POST',url: "/province/queryAllCityList",cache : false,async: false, data: "provinceId=" +obj,dataType: "json",success: function(result) {$("#add_city").empty();$("#add_city").append("<option value=''>请选择</option>");if(result.length>0){ for(var i = 0; i < result.length; i++){if(city_value == result[i].id){$("#add_city").append("<option value='"+result[i].id+"' selected='selected'>"+result[i].cityName+"</option>");//新增}else{$("#add_city").append("<option value='"+result[i].id+"'>"+result[i].cityName+"</option>");//新增}}}},error: function(XMLHttpRequest, textStatus, errorThrown) {}});}},buttonEventInit: function () {//添加挽回记录按钮$("#addNormal").off("click").on("click", function() {//通过ajax方式获取页面内容，放到模态框中$.ajax({ url: '/audit/add' , type: 'POST',async: false, cache: false, success: function (result) {$(".zr-modal-body").html(result);//初始化弹窗中的列表项state =1;area_value ='';//置空值，防止点击查看和修改之后下列有值后，会默认选中状态province_value =''city_value = '';main.initAcciden();}, error: function (returndata) { } }); main.openWindow();//弹出窗口});//查询按钮$("#accidentSearch").off("click").on("click", function() {main.eventInit.dataTableInit();});$("#saveButton").off("click").on("click", function() {main.validation.valFormBeforeSubmit();});},dataTableInit: function() {table = $('#tableForData').DataTable({pagingType: "full_numbers",iDisplayLength : 10,searching: false, // 禁用搜索框ordering: false, // 禁止各列排序bAutoWidth: true, // 是否非自动宽度 设置为falsebLengthChange:false,destroy: true, // 点击“查询”按钮时允许datatables重新渲染tableserverSide: true,scrollX: true,ajax : function(data, callback, settings) {// 封装请求参数console.log(222)var param = main.getQueryCondition.createCondition(data);console.log(3333)$.ajax({type: 'POST',url: "/audit/getAuditDatasByPage",cache : false,data: param,dataType: "json",success: function(result) {if (result.errorCode == 0) {alert("查询失败");return;}callback(result);},error: function(XMLHttpRequest, textStatus, errorThrown) {alert("查询失败");}});},oLanguage:{sProcessing: "正在获取数据，请稍后...",//sZeroRecords: "没有您要搜索的内容",sZeroRecords: "无数据",sInfoEmpty:'',sInfo: "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项",oPaginate: {"sPrevious": "<i class='zricon-arrow-left'></i>","sNext": "<i class='zricon-arrow-right'></i>","sFirst" : "第一页","sLast" : "最后一页"}},fnRowCallback: function(nRow, aData, iDisplayIndex) { // 首列自增},columnDefs: [ // 定义列的宽度、样式等{ "width": "150px", "targets": 0 },{ "width": "120px", "targets": 1 },{ "width": "80px", "targets": 2 },{ "width": "80px", "targets": 3 },{ "width": "80px", "targets": 4 },{ "width": "80px", "targets": 5 },{ "width": "80px", "targets": 6 },{ "width": "80px", "targets": 7 },{ "width": "80px", "targets": 8 },{ "width": "80px", "targets": 9 },{ "width": "80px", "targets": 10 },{ "width": "80px", "targets": 11 },{ "width": "80px", "targets": 12 },{ "width": "80px", "targets": 13 },{ "width": "80px", "targets": 14 },{ "width": "80px", "targets": 15 },{ "width": "80px", "targets": 16 },{ "width": "80px", "targets": 17 },{ "width": "80px", "targets": 18 },{ "width": "150px", "targets": 19 }],columns: [{data: "state",render : function(data, type, row, meta) {return "<a class='showData'"+ " pk=\'" + row.id +"\'"+">查看</a><a class='updateData'"+ " pk=\'" + row.id +"\'"+">修改</a><a class='delIndexData'"+ "id=\'" + row.id +"\'"+">删除</a>";}},{data: "no" },{data: "areaName"},{data: "provinceName" },{data: "cityName" },{data: "system"},{data: "firstOrg"},{data: "secondOrg"},{data: "thirdOrg"},{data: "inOuts"},{data: "nature"},{data: "source"},{data: "investigateResult"},{data: "casePrice"},{data: "savePrice"},{data: "person"}, {data: "personName"},{data: "post"},{data: "postLevel"},{data: "createPerson"},{data: "settlecaseDate",render:function(data, type, full, meta) {if (data == 0) {return "-";}return zr.tools.format('yyyy-MM-dd hh:mm:ss', new Date(data)); }} ],drawCallback: function () {$("a.showData").click(function() {var pk = $(this).attr("pk");state= 1;//查看commonUtil.handlePostRequest("/audit/getDictDataById", { id: pk}, main.openWindow);}); $("a.delIndexData").click( function() {var id = $(this).attr("id");message.confirm('是否要删除此条数据',{onConfirm:function(){$.ajax({url: "/audit/delData/"+id,type: 'POST',success: function (data) {table.ajax.reload();}});}})});$("a.updateData").click(function() {var pk = $(this).attr("pk");state =2;//编辑commonUtil.handlePostRequest("/audit/getDictDataById", { id: pk}, main.openWindow);}); }});},addPersonSelectChanged(selectObj) {$("#add_person").val(selectObj.userName);$("#add_person_name").val(selectObj.realName);$("#add_post").val(selectObj.positionName);$("#add_postLevel").val(selectObj.levelName);$("#time").val(selectObj.entryDateStr);// organizationFullName: "京东集团-京东物流-综合规划群-物流研发部-国际研发部-国际客售研发部"var organizationArr = selectObj.organizationFullName.split('-')$("#add_system").val(organizationArr[1] || "");$("#add_firstOrg").val(organizationArr[2] || "");$("#add_secondOrg").val(organizationArr[3] || "");$("#add_thirdOrg").val(organizationArr[4] || "");},investigationPersonSelectChanged(selectObj) {$("#add_investigationPerson").val(selectObj.userName);}},getQueryCondition: { // 组装查询参数createCondition: function(data) {var param = {};//组装分页参数param.start = data.start;param.length = data.length;param.draw = data.draw;param.no = $("input[name='no']").val(); // 事故编号param.area = $("select[name='areaSearch']").val();//区域param.province = $("select[name='provinceSearch']").val(); // 省param.city = $("select[name='citySearch']").val(); // 市param.system = $("#add_system").val(); // 体系param.firstOrg = $("select[name='firstOrg']").val(); // 一级机构param.secondOrg = $("select[name='secondOrg']").val(); //二级机构param.thirdOrg = $("select[name='thirdOrg']").val(); //三级机构param.inOuts = $("select[name='inOut']").val(); //内外部案件param.nature = $("select[name='nature']").val(); //案件性质param.source = $("select[name='source']").val(); //来源途径param.investigateResult = $("select[name='investigateResult']").val(); //调查结果param.casePrice = $("input[name='casePrice']").val(); //涉案金额param.savePrice = $("input[name='savePrice']").val(); //挽回金额param.post = $("select[name='post']").val(); //涉案人岗位(岗位)param.postLevel = $("select[name='postLevel']").val(); //涉案人级别(职级)param.startTime = $("#date-1").val();//案发开始时间param.endTime = $("#date-2").val();//案发结束时间param.jastartTime = $("#date-3").val();//结案开始时间param.jaendTime = $("#date-4").val();//结案结束时间return param;}},validation: {valFormBeforeSubmit: function() { var errorClassName = 'zr-form-item-error';var reg = /^[-+]?\d+$/;var passFlag = true; //省var $_province = $("#add_province");if(!$_province.val()){passFlag = false;alert("省不可为空");return;}//市var $_city = $("#add_city");if(!$_city.val()){passFlag = false;alert("市不可为空");return;}//终端var $_add_system = $("#add_system");if(!$_add_system.val()){passFlag = false;alert("终端不可为空");return;}//入职时间var $_time = $("#time");if(!$_time.val()){passFlag = false;alert("入职时间不可为空");return;}//案发时间var $_caseDate = $("#caseDate");if(!$_caseDate.val()){passFlag = false;alert("案发时间不可为空");return;}//结案时间var $_settlecaseDate = $("#settlecaseDate");if(!$_settlecaseDate.val()){passFlag = false;alert("结案时间不可为空");return;}//涉案人ERPvar $_person = $("#add_person");if(!$_person.val()){passFlag = false;$_person.addClass("validatainput");} else {$_person.removeClass("validatainput");}//涉案人var $_personName = $("#add_person_name");if(!$_personName.val()){passFlag = false;$_personName.addClass("validatainput");} else {$_personName.removeClass("validatainput");}var saspDivs = $(".saspDiv");for(var i=0;i<saspDivs.length;i++){ var inputs = $(saspDivs[i]).find("input");if($(inputs[0]).val()&&$(inputs[0]).val().length>20){ passFlag = false;$(inputs[0]).addClass("validatainput");} else {$(inputs[0]).removeClass("validatainput");}if($(inputs[1]).val()&&$(inputs[1]).val().length>20){passFlag = false;$(inputs[1]).addClass("validatainput");} else {$(inputs[1]).removeClass("validatainput");}if($(inputs[2]).val()&&!reg.test($(inputs[2]).val())){passFlag = false;$(inputs[2]).addClass("validatainput");} else {$(inputs[2]).removeClass("validatainput"); }}//涉案金额var $_casePrice = $("#add_casePrice");var pay = /^[0-9]+(.[0-9]{1,5})?$/;if(!$_casePrice.val()){passFlag = false;$_casePrice.addClass("validatainput");} else {if(pay.test($_casePrice.val())){ $_casePrice.removeClass("validatainput");}else{ passFlag = false;$_casePrice.addClass("validatainput");} }//作案手法var $_caseMode = $("#add_caseMode");if(!$_caseMode.val()){passFlag = false;$_caseMode.addClass("validatainput");} else {$_caseMode.removeClass("validatainput");}//案件描述var $_caseDescribe = $("#add_caseDescribe");if(!$_caseDescribe.val()){passFlag = false;$_caseDescribe.addClass("validatainput");} else {$_caseDescribe.removeClass("validatainput");}//调查结果var $_investigateResult = $("#add_investigateResult");if(!$_investigateResult.val()){passFlag = false;$_investigateResult.addClass("validatainput");} else {$_investigateResult.removeClass("validatainput");} //处理结果var $_processResult = $("#add_processResult");if(!$_processResult.val()){passFlag = false;$_processResult.addClass("validatainput");} else {$_processResult.removeClass("validatainput");}//挽回金额var $_savePrice = $("#add_savePrice");if(!$_savePrice.val()){passFlag = false;$_savePrice.addClass("validatainput");} else {if(pay.test($_savePrice.val())){ $_savePrice.removeClass("validatainput");}else{ passFlag = false;$_savePrice.addClass("validatainput");} }//降低成本var $_reduceCost = $("#add_reduceCost");if(!$_reduceCost.val()){passFlag = false;$_reduceCost.addClass("validatainput");} else {if(pay.test($_reduceCost.val())){ $_reduceCost.removeClass("validatainput");}else{ passFlag = false;$_reduceCost.addClass("validatainput");} }//内部处理人数var $_insidePunishCount = $("#add_insidePunishCount");if($_insidePunishCount.val()&&!reg.test($_insidePunishCount.val())){passFlag = false;$_insidePunishCount.addClass("validatainput");} else {$_insidePunishCount.removeClass("validatainput");}//外部处理人数var $_externalPunishCount = $("#add_externalPunishCount");if($_externalPunishCount.val()&&!reg.test($_externalPunishCount.val())){passFlag = false;$_externalPunishCount.addClass("validatainput");} else {$_externalPunishCount.removeClass("validatainput");}//案件调查人var $_investigationPerson = $("#add_investigationPerson");if(!$_investigationPerson.val()){passFlag = false;$_investigationPerson.addClass("validatainput");} else {$_investigationPerson.removeClass("validatainput");}//整个建议var $_rectificationAdvice = $("#add_rectificationAdvice");if(!$_rectificationAdvice.val()){passFlag = false;$_rectificationAdvice.addClass("validatainput");} else {$_rectificationAdvice.removeClass("validatainput");}//有未填项就返回if(!passFlag){return;}
// //获取涉案商品列表加入到数组var jsonProArray = [];var saspDivs = $(".saspDiv");for(var i=0;i<saspDivs.length;i++){var jsonFile = {};var inputs = $(saspDivs[i]).find("input");jsonFile.productName = inputs[0].value;jsonFile.productModel = inputs[1].value;jsonFile.productCount = inputs[2].value;//判断下，如果用户在涉案商品、商品型号、商品数量中只要有一个填写就加入到jsonProArray中if(jsonFile.productName!='' || jsonFile.productModel !='' || jsonFile.productCount !=''){jsonProArray.push(jsonFile);}}$("#products").val(JSON.stringify(jsonProArray));$("#areaName").val($("select[name='area'] option:selected").text());$("#provinceName").val($("select[name='province'] option:selected").text());$("#cityName").val($("select[name='city'] option:selected").text());var data = $("#uploadForm").serialize();var myurl ="";//保存首页数据if(state ==1){myurl = '/audit/saveData';}else if(state ==2){myurl='/audit/updateData';}$.ajax({type: 'POST',url: myurl,cache : false,data: data,success: function(result) {table.ajax.reload(function(){},false);modalWindow.hide();},error: function(XMLHttpRequest, textStatus, errorThrown) {}});}}};return {init: main.init};
}, { requires: ["jquery", "datePicker", "datatables","message","modal", "./common/manage-support","./common/erp-autocomplete"] });转载的，出处忘了
这篇关于纯js实现Autocomplete的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
![C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量](https://i-blog.csdnimg.cn/direct/cda2638386c64e8d80479ab11fcb14a9.png)
