感谢陪伴

可输入可选择可模糊查询的 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