模糊查询基于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 //模糊查询结束

参考：下拉框可实现select与input功能的简便做法

　　　bootstrap框架下下拉框select搜索功能

本文仅作为个人记录。

可供参考。

2017-11-1  08:36:00  修改

2017-11-13 08:36:19  上传