首页 > > 网页制作 > Javascript >

可进行编辑的下拉选择框

2018-08-26 17:26:59来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

  • 可以进行输入的下拉选择框
  • 根据输入内容筛选值
  • 支持上下键进行下拉内容的选择
  • 支持使用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可以使用。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

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

下一篇：react-router-dom v^4路由、带参路由的配置

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签