可进行编辑的下拉选择框金沙官网线上:

自己实现了一个可以进行编辑的下拉选择框,主要功能点

我们知道,一般select下拉框是只能选择的,不能用来输入内容的。而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让select变成text,允许用户输入想要的内容,同时还可以在输入的时候将包含关键字的项也列出来,供快速选择。

  • 可以进行输入的下拉选择框
  • 根据输入内容筛选值
  • 支持上下键进行下拉内容的选择
  • 支持使用Enter键确认上下键选择的内容
  • 支持ESC键退出选择

金沙官网线上 1

下面才是重点

查看演示效果            源码下载.rar)

演示图(演示时颜色选择了经典的红绿配 -_-||| )

本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果。我们来看下如何使用。

金沙官网线上 2

HTML结构

金沙官网线上,实现代码如下

下面是一个基本的select下拉框。

1.测试使用页面

<select id="editable-select"> 
<option>Alfa Romeo</option> 
<option>Audi</option> 
<option>中国人民银行</option> 
<option>中国人民</option> 
<option>中国</option> 
<option>BMW</option> 
</select> 
<!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>

此外还需要加载jQuery库和jquery.editable-select.js文件,在源码下载包里已经有了。

2.insel.js代码

jQuery

/**
 * 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();
            }
        }
    });
}

只需要以下代码就能实现传统的下拉框变成有输入功能的下拉框了。

本文由金沙官网线上发布于Web前端,转载请注明出处:可进行编辑的下拉选择框金沙官网线上:

您可能还会对下面的文章感兴趣: