自定义下拉框联动查询

<center><font size="5"> 自定义输入下拉框联动查询</center></font>

html

该div只有部分样式，其中input 中class为 input-select 必须有

该 ul 的class必须添加 ul下的li的内容及其自定义属性自行定义

   <script type="text/javascript" src="/assets/js/jquery-1.11.1.min.js"></script>
   <link href="input-select.css" rel="stylesheet" type="text/css" />
   <script src="input-select.js"></script>
   <script src="test-mail.js"></script>

<div class="form-group">
       <label for="Name" class="col-sm-2 control-label form-label">
           {{TPFunTi18nLang $.i18n.lang "data" "export.setting.tb.name"}}
       </label>
       <div class="col-sm-6">
           <input type="text" class="form-control input-select margin-b-5" value=""
                  id="input-select">

           <ul class="input-select-ul">
               <li value="" >没有数据</li>
           </ul>
       </div>
</div>

css

input-select.css

.input-select-ul{
    display: none;
    width: 96%;
    margin-left: 2px;
    list-style: none;
    position: absolute;
    padding: 5px 0;
    border: 0.1rem solid #0b87e3;
   /* border-top: 0;*/
    z-index: 1000;
    background-color: #ffffff;
}
.input-select-ul li{
    display: block;
    padding: 2px 5px;
    color: #000;
    text-decoration: none;
}
.input-select-ul li:hover{
    background-color: #399bff;
    color: #000;
}

js

input-select.js

$(function () {

    //监听输入框获取焦点事件
    // $(".input-select").focus(function () {
    //     $(this).siblings(".input-select-ul").show()
    // });
    //监听输入框的点击事件
    $(".input-select").on('click',function () {
        $(this).siblings(".input-select-ul").show()
    });
    //监听鼠标离开ul时监听事件
    $(".input-select-ul").mouseleave(function () {
        $(this).hide();
    });
    //监听li的点击事件
    // $(".input-select-ul li").on("click",function(){      //只需要找到你点击的是哪个ul里面的就行
    //     //输入框赋值
    //     $(this).parent().prev().val($(this).attr("value"));
    //     //隐藏下拉框
    //     $(this).parent().hide()
    // });
    $(document).on('click', '.input-select-ul li', function() {
        //输入框赋值
        $(this).parent().prev().val($(this).attr("value"));
        //隐藏下拉框
        $(this).parent().hide()
    });

});
/**
 * @function (通用方法，页面初始化时调用即可)根据指定搜索的值和指定搜索的字段从数组searchData中查询数据
 *@param domId  页面input的id
 *@param searchData 搜索的数据源
 * @param searchAttr 搜索的字段,多个字段以逗号分开
 * @param isLike   是否模糊查询;true-模糊匹配，false-完全匹配;默认false
 * @param showDefaultNum 当监听到input的值为空时显示默认条数，如果为0则默认不显示
 * @param noRewordTips  当搜索数据为空的提示信息
 * @param initUl  是否需要初始化Ul，默认不初始化，由于样式问题不建议初始化
 */
function initInputSelect(domId, searchData, searchAttr, isLike, showDefaultNum, noRewordTips,initUl) {

    //check input的id,搜索的原数据不能为空
    if (domId === "" || searchData === "" ||searchData.length===undefined || searchData.length <= 0 || searchAttr === "") {
        return
    }
    //默认模糊匹配
    if (isLike === "") {
        isLike = false
    }
    //默认当输入的值为空时显示5条，为0时不显示
    if (showDefaultNum === "" || parseInt(showDefaultNum) === undefined) {
        showDefaultNum = 5
    }
    //默认空记录显示信息
    if (noRewordTips===""){
        noRewordTips="没有检索到任何记录"
    }
    //默认不初始化
    if (initUl===""){
        initUl=false
    }
    //初始化 ul和li
    if (initUl===true){
        let ulHtml="<ul class=\"input-select-ul\" style=\"width: 99%;margin-top: -10px\">\n" +
            "<li value=\"\" >"+noRewordTips+"</li>\n" +
            "</ul>";
        $("#" + domId).after(ulHtml)
    }
    //默认li中的名称为搜索的字段的名称(多个时默认第一个)
    let defaultLiName = searchAttr.split(",")[0];
    //监听输入的输入的值的改变
    $("#" + domId).bind("input propertychange", function (event) {
        let inputVal = $(this).val();
        //没有值默认显示前5条
        if (isNull(inputVal) && showDefaultNum > 0) {
            //默认显示前5条
            $(searchData).each(function (i, v) {
                if (i === 0) {
                    $("#" + domId).next().children("li").remove();
                }
                if (i < showDefaultNum) {
                    let appendHtml = "<li  value=\"" + v[defaultLiName] + "\" >" + v[defaultLiName] + "</li>";
                    $("#" + domId).next().append(appendHtml)
                }
            });
            return
        }
        let searchArr = searchInputSelectData(searchData, searchAttr, inputVal, isLike);
        //清除下拉框的数据
        $(this).next().children("li").remove();
        if (searchArr.length) {
            for (let i = 0; i < searchArr.length; i++) {
                let v = searchArr[i];
                let appendHtml = "<li  value=\"" + v[defaultLiName] + "\" >" + v[defaultLiName] + "</li>";
                $(this).next().append(appendHtml)
            }

        } else {
            $(this).next().append("<li value=\"\" >" + noRewordTips + "</li>")
        }
    });
}


/**
 * @function 根据指定搜索的值和指定搜索的字段从数组searchData中查询数据
 *@param searchData 搜索的数据源
 * @param searchAttr 搜索的字段,多个字段以逗号分开
 * @param searchVal 搜索的值
 * @param isLike   是否模糊查询;true-模糊匹配，false-完全匹配;默认false
 * @returns Array{Array|*} 返回搜索结果，数组类型
 */
function searchInputSelectData(searchData,searchAttr,searchVal,isLike) {
    //return
    var returnArr = [];

    //check
    if (searchVal === "" || searchAttr === "" ||searchData===""||searchData.length<=0) {
        return returnArr;
    }
    //转换搜索的字段为数组类型
    let searchAttrArr = searchAttr.split(",");
    //默认完全匹配
    if (isLike === "") {
        isLike=false
    }
    let likePattern = new RegExp(searchVal);
    for (let i = 0; i < searchData.length; i++) {
        if (isLike) {
            //模糊查询
            for (let k=0;k<searchAttrArr.length;k++){
                if (likePattern.test(searchData[i][searchAttrArr[k]])) {
                    returnArr.push(searchData[i]);
                }
            }
        } else {
            //完全匹配
            for (let k=0;k<searchAttrArr.length;k++){
                if (searchVal === searchData[i][searchAttrArr[k]]) {
                    returnArr.push(searchData[i]);
                }
            }
        }
    }

    return returnArr;
}


/**
 *@function 演示
 * */
//定义查询的元数据
var searchData=[{
    "name": "aliyun",
    "host": "smtp.aliyun.com",
    "port": 25,
    "ssl": 465
},
    {
        "name": "gmail",
        "host": "smtp.gmail.com",
        "port": 587,
        "ssl": 465
    },
    {
        "name": "exmail",
        "host": "smtp.exmail.qq.com",
        "port": 587,
        "ssl": 465
    },
    {
        "name": "qq",
        "host": "smtp.qq.com",
        "port": 25,
        "ssl": 465
    },
    {
        "name": "qq",
        "host": "smtp.163.com",
        "port": 25,
        "ssl": 465
    }
];
    //页面加载完成时 添加input的焦点获取事件
    $("#input-select").bind("input propertychange", function (event) {
        //获取输入框输入的值
        let inputVal = $(this).val();

        //没有值默认显示前5条
        if (isNull(inputVal)) {
            //默认显示前5条
            $(mailDefaultData).each(function (i, v) {
                if (i === 0) {
                    $("#input-select").next().children("li").remove();
                }
                if (i < 5) {
                    let appendHtml = "<li  value=\"" + v.host + "\" >" + v.host + "</li>";
                    $("#input-select").next().append(appendHtml)
                }
            });
            return
        }
        //调用方法搜索数据
        let searchArr = searchInputSelectData(searchData,"host",inputVal, true);

        //清除下拉框的原有数据
        $(this).next().children("li").remove();
        if (searchArr.length) {
            for (let i = 0; i < searchArr.length; i++) {
                let v = searchArr[i];
                let appendHtml = "<li  value=\"" + v.host + "\" >" + v.host + "</li>";
                $(this).next().append(appendHtml)
            }

        } else {
            $(this).next().append("<li value=\"\" >没有检索到任何记录</li>")
        }
    });