感谢陪伴

可输入可选择可模糊查询的 select 下拉

目录

• 简介
• CSS 代码
• JS 代码
• HTML 代码
• 参考链接
• 结束语

简介

• 相比网上各种下拉插件，要么出现各种传值问题，要么样式跟现有的项目冲突，此方法没有选用 select 标签，返璞归真
• 啥也不说了，直接上代码。

CSS代码

<style>
.selectDiv {
    display:none;
    z-index:9999;
    position:absolute;/*不加的话可能会影响页面其他元素*/
    border:1px solid #999;
    width:215px;/*调整下拉框的宽度*/
    height:106px;
    margin-left:74px;
    background:white;
    border-radius:4px;/*调整边框圆角*/
    overflow-y:scroll;/*添加下拉框滚动条*/
    overflow-x:hidden;/*防止ie上下拉框出现横向滚动条*/
} 
.selectSpan {
     width:190px;/*调整下拉框每个元素的宽度*/
     height:18px;
     padding-top:3px;
     border:1px solid #ffffff;
     margin-left:4px;
     display:block;/*很重要，调整宽高度需要*/
     word-wrap:break-word;/*自动换行*/
     vertical-align:middle;/*垂直居中*/
 } 
.selectSpan:hover {
     background:#1f7ed0;
 }
</style>

JS代码

var TempArr = [];
var selectDivHtml = "";
// 当鼠标点击输入框时执行此方法
function queryUnCreateAddress(){
    TempArr = [];
    var showFlag = true;
    $("#selectDivShow").html(selectDivHtml);

    $.ajax({ //此为向数据库查询json数据填充到下拉框里
        type:"post",
        url:path + "/workplace/workplaceInformationMessage!queryUnCreateAddress.action",
        dataType:"json",
        async:false,
        success:function(data){
            TempArr = data;
            if(null != data && data.length > 0){
                $(data).each(function(index,value){
                    var leng = checkLength(value.workplaceAddress); //计算数据的长度，区分中英文
                    var height = Math.ceil(leng/21) * 15; //设置下拉框每个选项的高度，
                    if(height == 15){
                        height = 18;
                    }
                    selectDivHtml +="<span class='selectSpan' style='height:"+height+"px' data-code='"+value.addressCode+"' data-address='"+value.workplaceAddress+"' onclick='selectedValueInput(this)'>"+value.workplaceAddress+"</span>";
                });
            }else{
                showFlag = false;
            }
        },
        error:function(){
            alert("系统错误");
        }
    });
    $("#selectDivShow").append(selectDivHtml);
    selectDivHtml = "";

    if(showFlag){
        $("#selectDivShow").attr("style","display:block");
    }
}
// 点击下拉框每个选项时触发此方法
function selectedValueInput(obj){
    var code = $(obj).data("code");
    var address = $(obj).data("address");
    $("#workplaceAddressNum").val(code); //隐藏域，按需添加，方便传值到后台
    $("#contractAddress").val(address);
    $("#selectDivShow").attr("style","display:none");
}
// 在输入框输入内容时触发此方法，方便实时监听匹配
function setinput(this_){
    var select = $("#selectDivShow");
    select.html("");

    for(var i = 0;i<TempArr.length;i++){
        if(TempArr[i].workplaceAddress.substring(0,$(this_).val().length).indexOf($(this_).val()) == 0){
            var leng = checkLength(TempArr[i].workplaceAddress);
            var height = Math.ceil(leng/21) * 15;
            if(height == 15){
                height = 18;
            }
            selectDivHtml +="<span class='selectSpan' style='height:"+height+"px' data-code='"+TempArr[i].addressCode+"' data-address='"+TempArr[i].workplaceAddress+"' onclick='selectedValueInput(this)'>"+TempArr[i].workplaceAddress+"</span>";
        }
    }
    select.append(selectDivHtml);
    selectDivHtml = "";
}
// 离开输入框时触发此方法
function addressBlur(){
    var selectObj = $("#selectDivShow").find("span:hover");
    if(null != selectObj && selectObj.length > 0){ //针对鼠标点击下拉框选项触发此方法时的特殊处理
        selectedValueInput(selectObj);
        return;
    }
    $("#selectDivShow").attr("style","display:none");
}
// 计算输入值的长度
function checkLength(str){
    var sLen = 0;
    for(var i = 0;i<str.length;i++) {
        if(str.charAt(i) <= '\255') { // 单字节字符
            sLen++;
        }else { // 汉字或其他2字节字符
            sLen = sLen + 3;
        }
    }
    return sLen;
}

HTML代码

<input type="text" id="contractAddress" name="workplaceInformation.contractAddress" 
onblur="addressBlur()" oninput="setinput(this)" onfocus="queryUnCreateAddress()" value="${workplaceInformation.contractAddress }" />
<div id="selectDivShow" class="selectDiv"></div>

参考链接

结束语

• 20190723更新 仿携程等网站鼠标放入目的地输入框时的样式

  <style>
  .labels {
    width: 70px;
    height: 25px;
    line-height: 25px;
    margin: 5px 5px 0 5px;
    float: left;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
  }
  </style>
  

• 未完待续…

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 tujide.lv@foxmail.com