自定义下拉框联动查询

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

html

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

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

   
   
   
   

  • 没有数据

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("
  • 没有检索到任何记录
  • ") } });

    你可能感兴趣的:(自定义下拉框联动查询)