我要评论自己实现了一个可以进行编辑的下拉选择框，主要功能点
- 可以进行输入的下拉选择框
- 根据输入内容筛选值
- 支持上下键进行下拉内容的选择
- 支持使用enter键确认上下键选择的内容
- 支持esc键退出选择
下面才是重点
演示图（演示时颜色选择了经典的红绿配 -_-||| ）
实现代码如下
1.测试使用页面
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>带有输入框的下拉选择框</title>
<script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="insel.js"></script>
<link rel="stylesheet" type="text/css" href="insel.css"/>
<script type="text/javascript">
$(function(){
inselinit("country", ["日本","韩国","阿拉伯"]);
});
</script>
</head>
<body>
<input type="text" name="country" placeholder="国家" id="country" style="width: 200px;"/>
<ul id="country_insel" class="insel">
<li>中国</li>
<li>古巴</li>
<li>巴西</li>
<li>美国</li>
<li>俄罗斯</li>
</ul>
</body>
</html>
2.insel.js代码
/**
* author:guojikai
* date:2018/8/22
* */
/**
* css中单个li的高度设置,默认设置为20,查看insel.css
* note:在更改insel.css中.insel li{height:**px};属性时同步更新该参数值
* */
var insel_li_height = 20;
/**
* css中ul下拉列表最大高度,默认为100,查看insel.css
* note:在更改insel.css中.insel{max-height:**px};属性值时同步更新改参数值
* */
var ul_max_height = 100;
/**
* 根据输入的内容自动筛选符合需求的数据值
* param id 获取需要自动提示的input框id
* param alldata 所有需要筛选的数据
* */
function autopointout(id, alldata){
//文本框id
var inid = "#"+id;
//下拉框id
var inselid = "#"+id+"_insel";
//筛选结果
var showdata = [];
//当前input输入值
var curload=$(inid).val();
if(curload == ""){
//当文本框内无值时，展示所有信息
showdata = alldata;
}else{
//根据输入的内容筛选数据
for(var index in alldata){
if(alldata[index].indexof(curload)!=-1){
showdata.push(alldata[index]);
}
}
}
//清空原列表数据
$(inselid).empty();
//展示筛选结果
for(var index in showdata){
$(inselid).append("<li>"+showdata[index]+"</li>");
}
//对新补充的列表数据添加事件
$(inselid+" li").mousedown(function(){
$(inid).val($(this).text());
});
}
/**
* 初始化可以进行输入的选择框
* param id 初始化的input框id
* param datalist 初始化的列表数据[数据类型为数组]
* note:可以自行扩展通过ajax获取列表数据，进行可输入选择框下拉数据的初始化
* */
function inselinit(id, datalist){
//jquery操作的初始化input框id
var inid = "#"+id;
//jquery操作的下拉列表框id
var inselid = "#" + id +"_insel";
//将可选择数据列表纳入可选择范围内
if(datalist != undefined && (typeof datalist=='object') && datalist.constructor==array){
for(var index in datalist){
$(inselid).append("<li>"+datalist[index]+"</li>");
}
}
//获取下拉框内所有的数据值
var dataarr = [];
var allli = $(inselid +" li");
for(var allliindex=0; allliindex<allli.length; allliindex++){
dataarr.push($(allli[allliindex]).text());
}
//调整展示样式
$(inselid).width($("#"+id).width());
$(inselid).css("border", $("#"+id).css("border"));
$(inselid).css("border-color", "#eee");
$(inselid).css("border-style", $("#"+id).css("border-style"));
$(inselid).css("padding", $("#"+id).css("padding"));
//增加事件：点击选中数据时填充至input文本框内
//note:使用mousedown事件原因：避免blur与clock事件的冲突
$(inselid+" li").mousedown(function(){
$(inid).val($(this).text());
});
//输入文本框获取焦点时展示下拉列表数据
$(inid).focusin(function(){
$(inselid).show();
//数值4位上下边框的高度
$(inselid).offset({"top":$(inid).position().top+$(inid).height()+4, "left":$(inid).position().left});
$(inselid).css("display", "block");
$(inselid).css("position", "relative");
autopointout(id, dataarr);
});
//输入文本框失去焦点时隐藏下拉列表
$(inid).blur(function(){
$(inselid).hide();
});
//文本内容改变时筛选数据展示
$(inid).bind('input propertychange', function() {
autopointout(id, dataarr);
});
$(inid).keydown(function(e){
//当前激活数据元素
var activeli = $(inselid+" .active").get(0);
if(e.keycode == 38){
//上键:向上选择内容
if(activeli==undefined){
$($(inselid+" li").last()).addclass("active");
activeli = $(inselid+" li").last();
}else{
//清除之前的选择
$(activeli).removeclass("active");
//为前一个数据元素设置选中状态
$(activeli).prev().addclass("active");
//获取下一个选中的数据元素
activeli = $(inselid+" .active").get(0);
//如果前一个选中的数据元素为undefined,说明无前一个,选中最后一个
if(activeli == undefined){
$($(inselid+" li").last()).addclass("active");
activeli = $(inselid+" li").last();
}
}
//设置滚动条位置
//1.根据css设置的li高度与ul最大高度,计算需要进行滚动的位置
var selindex = $(activeli).index()-(ul_max_height/insel_li_height-1)>0?$(activeli).index()-(ul_max_height/insel_li_height-1):0;
//2.将滚动条调节至对应的位置
$(inselid).scrolltop((selindex)*insel_li_height);
}else if(e.keycode == 40){
//下键:向下选择内容
if(activeli==undefined){
$($(inselid+" li").get(0)).addclass("active");
activeli = $(inselid+" li").get(0);
}else{
//清除之前的选择
$(activeli).removeclass("active");
//为下一个数据元素设置选中状态
$(activeli).next().addclass("active");
//获取下一个选中的数据元素
activeli = $(inselid+" .active").get(0);
//如果下一个选中的数据元素为undefined,说明无下一个,选中第一个
if(activeli == undefined){
$($(inselid+" li").get(0)).addclass("active");
activeli = $(inselid+" li").get(0);
}
}
//设置滚动条位置
//1.根据css设置的li高度与ul最大高度,计算需要进行滚动的位置
var selindex = $(activeli).index()-(ul_max_height/insel_li_height-1)>0?$(activeli).index()-(ul_max_height/insel_li_height-1):0;
//2.将滚动条调节至对应的位置
$(inselid).scrolltop(selindex*insel_li_height);
}else if(e.keycode == 27){
//esc:退出选择
$(inid).blur();
}else if(e.keycode == 13){
//enter:选中选择的内容到文本框内
if(activeli!=undefined){
$(inid).val($(activeli).text());
$(inid).blur();
$(inid).focus();
}
}
});
}
3.insel.css代码
.insel {
font-size: 14px;
list-style: none;
color: #888;
padding: 0px;
margin: 0px;
overflow-x: auto;
display: none;
/**
默认展示5个元素: 5*单个数据元素高度=最大高度
note:该参数值维护时同步更新insel.js中ul_max_height值
*/
max-height: 100px;
}
.insel li{
padding-left: 5px;
/**
单个数据元素高度
note:该参数值维护时同步更新insel.js中insel_li_height值
*/
height: 20px;
}
.insel li:hover{
background-color: #f5f5f5;
}
.insel .active{
background-color: #f5f5f5;
}
亲测在googlechrome可以使用。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论