模糊查询基于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="340px;height:26px;position: relative;top:2px;left:-1px;"
        />
        <select  id="selectAy" 
                 style="340px;height:26px; overflow:hidden;position:relative;top:-8px;left:92px;display:none;" 
                 onchange="changeAy()"  
                 onblur="outfocus(this)">
       </select>
    </td>
</tr>

js文件

//模糊查询-----选择方法
function checkAyValue(){
    var ay = document.getElementById("ay").value;
    if(ay!="" && ay!= null){
        selectAy(ay);
    }else{
        showAy();
    }
}
//模糊查询开始
function selectAy(ay){
    $("#selectAy").css({"display":"none"}); 
    var jsonfile = "minshi.json";
    if(ajtype.indexOf("民事")!=-1){jsonfile = "minshi.json";}
    else if(ajtype.indexOf("刑事")!=-1){jsonfile = "xingshi.json";}
    else if(ajtype.indexOf("行政")!=-1){jsonfile = "xingzheng.json";}
    else if(ajtype.indexOf("赔偿")!=-1){jsonfile = "peichang.json";}
    else if(ajtype.indexOf("执行")!=-1){jsonfile = "zhixing.json";}

    var ayName="";
    $.ajax({
           url: appPath + "clientpage/json/ay/" + jsonfile,//json文件位置
           type: "GET",//请求方式为get
           dataType: "json", //返回数据格式为json
           success: function(data) {//请求成功完成后要执行的方法 
               //除第一次外，清空select中的option选项
               $("#selectAy").empty(); 
               //遍历json数组
               $.each(data, function(i, item) {
                    var s = item.id.indexOf(ay);
                    if (s !=-1) {
                        ayName=item.name;
                        $("#selectAy").append("<option value="" + ayName + "" >" + ayName + "</option>");
                    }
                });
                if(ayName==null || ayName == ""){
                    afterSelectAy();
                    document.getElementById("ay").value=null;
                }else{
                    changeAy();
                }
           }
    });
}
function changeAy(){  
    document.getElementById("ay").value= 
        document.getElementById("selectAy").options[document.getElementById("selectAy").selectedIndex].value; 
 }  
NS4 = (document.layers) ? true : false;
function checkEnter(event,element){   
    var code = 0;
    if (NS4) code = event.which;
    else code = event.keyCode;
    if (code==13){
        $("#ayContent").css({"display":"none"});
        checkAyValue();
        $("#selectAy").css({"display":""});
        $("#selectAy").css({"background-color":"#F2F8FD"});
    }
}
function afterSelectAy(){
    layer.msg('没有符合您输入要求的检索结果，请重新输入进行检索！');
}
function outfocus(){
    $("#selectAy").css({"display":"none"});
}
//模糊查询结束

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

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

本文仅作为个人记录。

可供参考。

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

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