模糊查询基于select遍历json文件自动填充的实现
Posted Angelye
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模糊查询基于select遍历json文件自动填充的实现相关的知识,希望对你有一定的参考价值。
html页面
<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>
js文件
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",//请求方式为get 24 dataType: "json", //返回数据格式为json 25 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 //模糊查询结束
本文仅作为个人记录。
可供参考。
2017-11-1 08:36:00 修改
2017-11-13 08:36:19 上传
以上是关于模糊查询基于select遍历json文件自动填充的实现的主要内容,如果未能解决你的问题,请参考以下文章