可进行编辑的下拉选择框
程序员文章站
2022-07-05 15:26:22
自己实现了一个可以进行编辑的下拉选择框,主要功能点 可以进行输入的下拉选择框 根据输入内容筛选值 支持上下键进行下拉内容的选择 支持使用Enter键确认上下键选择的内容 支持ESC键退出选择 下面才是重点 演示图(演示时颜色选择了经典的红绿配 -_-||| ) 实现代码如下 1.测试使用页面 2.i ......
自己实现了一个可以进行编辑的下拉选择框,主要功能点
- 可以进行输入的下拉选择框
- 根据输入内容筛选值
- 支持上下键进行下拉内容的选择
- 支持使用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可以使用。
上一篇: python装饰器(披着羊皮的狼)
下一篇: Android项目刮刮奖详解(四)
推荐阅读