可进行编辑的下拉选择框

程序员文章站 2022-04-09 18:25:14

自己实现了一个可以进行编辑的下拉选择框，主要功能点可以进行输入的下拉选择框根据输入内容筛选值支持上下键进行下拉内容的选择支持使用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可以使用。

上一篇：一共几个人

下一篇：原生JS-旋转木马

可进行编辑的下拉选择框

js可填可选的下拉框

ASP .NET 可编辑输入自动匹配的下拉框

Mac中的文字编辑有哪些功能可助小编进行文字编辑

jQuery实现下拉框左右选择的简单实例

ASP .NET 可编辑输入自动匹配的下拉框

根据下拉框选择的值显示输入框

怎么在Excel 里面编辑选择框包括多项、单项选择框和下拉选择框

Word通过下拉型窗体域创建一个可以进行选择的下拉列表

纯js代码生成可搜索选择下拉列表的实例

MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框