JS+Html+Css 实现 自定义输入下拉框联动查询

自定义输入下拉框联动查询

html

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

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

   
   
   
   


       
           {{TPFunTi18nLang $.i18n.lang "data" "export.setting.tb.name"}}
       
       

           

           

               
没有数据
           
       

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="
\n" +
            "
"+noRewordTips+"
\n" +
            "
";
        $("#" + 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 = "
" + v[defaultLiName] + "
";
                    $("#" + 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 = "
" + v[defaultLiName] + "
";
                $(this).next().append(appendHtml)
            }

        } else {
            $(this).next().append("
" + noRewordTips + "
")
        }
    });
}


/**
 * @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" + v.host + "";
                    $("#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 = "
" + v.host + "
";
                $(this).next().append(appendHtml)
            }

        } else {
            $(this).next().append("
没有检索到任何记录
")
        }
    });