模糊查询基于select遍历json文件自动填充的实现

<tr> ???<td align="left"><span>案由</span> ???????<input ?type="text" name="ay" id="ay" value="" ?placeholder="输入内容之后，回车键可进行模糊检索！" onclick="showAy()" onkeypress="checkEnter(event,this);" ?style="width:340px;height:26px;position: relative;top:2px;left:-1px;"/> ???????<select ?id="selectAy" style="width:340px;height:26px; overflow:hidden;position:relative;top:-8px;left:92px;display:none;" onchange="changeAy()" ?onblur="outfocus(this)"></select> ???</td></tr>

 1 //模糊查询-----选择方法 2 function checkAyValue(){ 3 ????var ay = document.getElementById("ay").value; 4 ????if(ay!="" && ay!= null){ 5 ????????selectAy(ay); 6 ????}else{ 7 ????????showAy(); 8 ????} 9 }10 //模糊查询开始11 function selectAy(ay){12 ????$("#selectAy").css({"display":"none"}); 13 ????var jsonfile = "minshi.json";14 ????if(ajtype.indexOf("民事")!=-1){jsonfile = "minshi.json";}15 ????else if(ajtype.indexOf("刑事")!=-1){jsonfile = "xingshi.json";}16 ????else if(ajtype.indexOf("行政")!=-1){jsonfile = "xingzheng.json";}17 ????else if(ajtype.indexOf("赔偿")!=-1){jsonfile = "peichang.json";}18 ????else if(ajtype.indexOf("执行")!=-1){jsonfile = "zhixing.json";}19 20 ????var ayName="";21 ????$.ajax({22 ???????????url: appPath + "clientpage/json/ay/" + jsonfile,//json文件位置23 ???????????type: "GET",//请求方式为get24 ???????????dataType: "json", //返回数据格式为json25 ???????????success: function(data) {//请求成功完成后要执行的方法 26 ???????????????//除第一次外，清空select中的option选项27 ???????????????$("#selectAy").empty(); 28 ???????????????//遍历json数组29 ???????????????$.each(data, function(i, item) {30 ????????????????????var s = item.id.indexOf(ay);31 ????????????????????if (s !=-1) {32 ????????????????????????ayName=item.name;33 ????????????????????????$("#selectAy").append("<option value=\"" + ayName + "\" >" + ayName + "</option>");34 ????????????????????}35 ????????????????});36 ????????????????if(ayName==null || ayName == ""){37 ????????????????????afterSelectAy();38 ????????????????????document.getElementById("ay").value=null;39 ????????????????}else{40 ????????????????????changeAy();41 ????????????????}42 ???????????}43 ????});44 }45 function changeAy(){ ?46 ????document.getElementById("ay").value= 47 ????????document.getElementById("selectAy").options[document.getElementById("selectAy").selectedIndex].value; 48 ?} ?49 NS4 = (document.layers) ? true : false;50 function checkEnter(event,element){ ??51 ????var code = 0;52 ????if (NS4) code = event.which;53 ????else code = event.keyCode;54 ????if (code==13){55 ????????$("#ayContent").css({"display":"none"});56 ????????checkAyValue();57 ????????$("#selectAy").css({"display":""});58 ????????$("#selectAy").css({"background-color":"#F2F8FD"});59 ????}60 }61 function afterSelectAy(){62 ????layer.msg(‘没有符合您输入要求的检索结果，请重新输入进行检索！‘);63 }64 function outfocus(){65 ????$("#selectAy").css({"display":"none"});66 }67 //模糊查询结束