基于jQuery完成select下拉精选可输入附源码下载,js下拉选拔框与输入框联合浮动达成增加选中值到输入框的法子

By admin in 4858美高梅 on 2019年4月15日

友好达成了1个能够进行编写制定的下拉摘取框,重要成效点

咱俩理解,1般select下拉框是只能选用的,不能够用来输入内容的。而有时大家会碰着下拉框中绝非要选拔的消息项恐怕下拉摘取尤其多时,我们得以让select造成text,允许用户输入想要的内容,同时还足以在输入的时候将含有关键字的项也列出来,供高速选拔。

基于jQuery完结select下拉精选可输入附源码下载,jqueryselect

我们领悟,壹般select下拉框是只好采纳的,不能够用来输入内容的。而有时我们会蒙受下拉框中并未有要选取的音讯项或许下拉精选越多时,大家得以让select产生text,允许用户输入想要的内容,同时还足以在输入的时候将涵盖关键字的项也列出来,供高速选拔。

4858美高梅 1

查阅演示效果            源码下载

正文将用实例和我们分享壹款基于jQuery的下拉框插件,它同意用户输入内容,同时下拉挑选中会及时相配相关选项,补助键盘操作,还协理html选项内容,当然还是能够让下拉的历程带有动画效果。大家来看下怎么样接纳。

HTML结构

下边是二当中央的select下拉框。

<select id="editable-select"> 
<option>Alfa Romeo</option> 
<option>Audi</option> 
<option>中国人民银行</option> 
<option>中国人民</option> 
<option>中国</option> 
<option>BMW</option> 
</select> 

除此以外还须要加载jQuery库和jquery.editable-select.js文件,在源码下载包里早就有了。

基于jQuery完成select下拉精选可输入附源码下载,js下拉选拔框与输入框联合浮动达成增加选中值到输入框的法子。jQuery

只供给以下代码就能落到实处守旧的下拉框变成有输入功能的下拉框了。

$('#editable-select').editableSelect({ 
effects: 'slide' 
}); 

其实大家细看插件代码就会发现,笔者是将原本的select处理了下,形成了八个输入表单text和贰个列表ul。那样text能够输入,下拉选项则用ul面板,那样1来ul里的选项就足以增加任意html代码了,demo中有示范。然后经过行使CSS以及js技能能够实现下拉弹出、输入查找相配作用。

选用设置

filter:过滤,即当输入内容时下拉选项会合作输入的字符,帮助汉语,true/false,暗中认可true。
effects:动画效果,当触发弹出下拉采用框时的下拉框体现过渡效果,有default,slide,fade多个值,暗许是default。
duration:下拉选项框显示的连片动画速度,有fast,slow,以及数字(纳秒),私下认可是fast。

事件

onCreate:当输入时接触。
onShow:当下拉时触及。
onHide:当下拉框隐藏时触及。
onSelect:当下拉框中的选项被入选时接触。

事件调用方法:

$('#editable-select').editableSelect({ 
onSelect: function (element) { 
alert("Selected!"); 
} 
}); 

以上内容给我们享受了主导代码,供给源码的意中人能够直接下载哦。

本文实例讲述了js下拉摘取框与输入框联合浮动完毕增加选中值到输入框的秘诀。分享给大家供大家参考。具体如下:

  • 能够开始展览输入的下拉摘取框
  • 据悉输入内容筛选值
  • 支撑上下键实行下拉内容的采取
  • 协助使用Enter键确认上下键采用的剧情
  • 支撑ESC键退出选取

4858美高梅 2

您恐怕感兴趣的篇章:

  • asp select下拉菜单选拔Logo并实时突显
  • input+select(multiple) 达成下拉框输入值
  • select下拉选拔框美化达成代码(js+css+图片)
  • jquery撤废接纳select下拉框示例代码
  • js自动查找select下拉的菜系并选拔(示例代码)
  • 三个正确的仿携程自定义数据下拉摘取select
  • js完毕Select下拉框具备输入功能的方法
  • JS完毕的伍级联合浮动Select下拉采取框实例
  • jQuery实现充分实用赏心悦目的select下拉菜单选拔效果

大家领略,一般select下拉框是只可以选拔的,不能够用来输入内容的。而有时大家会遇…

此地演示js下拉摘取框与输入框联合浮动,直接加多选中值到输入框中的作用。这种成效相信广大情侣看到过吧,省去用户输入的勤奋,那里运用JS直接将值赋予输入框,掌握原理之后,可灵活运用,扩展出更多的特效来。

下边才是器重

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

运作截图如下:

以身作则图(演示时颜色挑选了卓越的红绿配 -_-||| )

正文将用实例和大家大快朵颐一款基于jQuery的下拉框插件,它同意用户输入内容,同时下拉挑选中会及时相称相关选项,辅助键盘操作,还帮衬html选项内容,当然还是能让下拉的历程带有动画效果。大家来看下怎样选用。

4858美高梅 3

4858美高梅 4

HTML结构

在线演示地址如下:

完成代码如下

上面是多个着力的select下拉框。

壹.测试使用页面

<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文件,在源码下载包里早已有了。

<html>
<head>
<title>下拉选择框与输入框联动,直接添加选中值到输入框</title>
</head>
<body>
<select id="uiSel">
  <option value="-1">请选择</option>
  <option value="until1">unti1</option>
  <option value="until2">unti2</option>
  <option value="until3">unti3</option>
  <option value="until4">unti4</option>
  <option value="until5">unti5</option>
</select>
<input type="text" name="" id="show" />
</body>
<script type="text/javascript">
document.getElementById('uiSel').onchange=function (){
  if(this.options[0].value==-1)this.options[0]=null;
  document.getElementById('show').value=this.value
};
</script>
</html>

4858美高梅,2.insel.js代码

jQuery

企望本文所述对大家的javascript程序设计有所支持。

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

只必要以下代码就能落实守旧的下拉框形成有输入功能的下拉框了。

您或者感兴趣的小说:

  • js达成上传文件增添和删除文件选择框
  • JS点击有个别图标或按键弹出文件选拔框的完结代码
  • JS完毕优质的大运选取框效果
  • AngularJS入门教程之Select(采取框)详解
  • 据书上说jQuery下拉挑选框插件帮助单选多选成效代码
  • 详解iOS时间接选举拔框
  • js表单处理中单选、多选、选用框值的获得及表单的类别化
  • javascript落实下拉提示选拔框
  • js表单中精选框值的获得及表单的种类化
  • JS完毕单击输入框弹出选拔框效果总体实例
  • jQuery完毕选中弹出窗口选拔框内容后赋值给文本框的措施
  • 深远领会采用框脚本[推荐]

3.insel.css代码

$('#editable-select').editableSelect({ 
effects: 'slide' 
}); 
.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;
}

实则大家细看插件代码就会发觉,作者是将原本的select处理了下,变成了贰个输入表单text和一个列表ul。那样text可以输入,下拉选项则用ul面板,这样一来ul里的选项就足以增加任意html代码了,demo中有示范。然后经过选择CSS以及js技能能够兑现下拉弹出、输入查找相称功用。

 亲测在谷歌Chrome能够运用。

慎选设置

filter:过滤,即当输入内容时下拉选项会同盟输入的字符,支持中文,true/false,私下认可true。
effects:动画效果,当触发弹出下拉选拔框时的下拉框浮现过渡效果,有default,slide,fade四个值,默许是default。
duration:下拉选项框显示的联网动画速度,有fast,slow,以及数字(皮秒),私下认可是fast。

事件

onCreate:当输入时接触。
onShow:当下拉时触及。
onHide:当下拉框隐藏时触及。
onSelect:当下拉框中的选项被入选时接触。

事件调用方法:

$('#editable-select').editableSelect({ 
onSelect: function (element) { 
alert("Selected!"); 
} 
}); 

上述内容给大家分享了中央代码,须求源码的爱人能够一向下载哦。

你恐怕感兴趣的稿子:

  • 根据jQuery的select下拉框选拔触发事件实例分析
  • jQuery完结下拉框多选 jquery-multiselect
    的实例代码
  • jQuery使用Selectator插件完成多选下拉列表过滤框(附源码下载)
  • jQuery实现充裕实用美丽的select下拉菜单选拔效果
  • jQuery结合CSS制作能够的select下拉菜单
  • JQuery
    select(下拉框)操作方法汇总
  • jQuery扁平化风格下拉框美化插件FancySelect使用指南
  • Jquery多选下拉列表插件jquery
    multiselect效能介绍及应用
  • jquery multiSelect
    多选下拉框
  • jQuery完毕Select下拉列表实行情形采用功用

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有