combo_select(下拉框可输入)

最新推荐文章于 2023-02-14 11:34:04 发布

dayan0202

最新推荐文章于 2023-02-14 11:34:04 发布

阅读量1.5k

点赞数

分类专栏： comboSelect 经验之谈文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/dayan0202/article/details/107938486

版权

经验之谈同时被 2 个专栏收录

21 篇文章

订阅专栏

comboSelect

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript和HTML实现一个下拉框，同时允许用户输入搜索。首先展示了一个默认的下拉框，然后说明需要对其进行初始化以添加输入功能。关键在于在原有的select框上添加一个input元素，并确保在数据拼接完成后进行下拉初始化。文章引用了一篇优快云博客作为参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认下拉框：

<select>
		<option value="">月份</option>
		<option value="一月">一月</option>
		<option value="二月">二月</option>
		<option value="三月">三月</option>
		<option value="四月">四月</option>
		<option value="五月">五月</option>
	</select>

若现在需要实现下拉并且可输入，需要对该下拉框进行初始化：

//$(document).ready(function() {
$(function() {
	$('select').comboSelect();
});

注意：所有动态数据拼接需要先完成数据拼接，再进行下拉初始化

$("#appCode").append('<option selected="selected" value="'+data[app].appCode+'">'+data[app].appName+'</option>')

$('select.appCode').comboSelect();

原理分析：
在原来select框基础上添加一个input框实现输入
数据初始化后下拉框实际代码格式给一个纯js实现下拉可输入：

<div id = "click" ><input type="text" style="display: block;" name ="inputusername" id = "inputusername" onFocus="showselect()" onKeyUp="SelectTip(0)">
   <select id = "username" style="display: none; float: left; position: absolute;" size = 10 onChange="setinputvalue()">
   <option value = "select">请选择姓名</option>
   </select>
   </div>

/*显示select*/
function showselect(){
                $("#username").css("display" ,"block");
                $("#username").width($("#inputusername").width());
            }

/*隐藏option*/
            function hiddenselect(){
                $("#username").css("display" ,"none");
            }

/*点击select 时 将select的值在input中显示*/
            function setinputvalue(){
                //alert($("#username").val());
                $("#inputusername").val($("#username").val());
                hiddenselect();
            }
           
            var TempArr=new Array();//存贮option

            function Init(){//获取所有options 将TempArr放入数组
                $("#username option").each(function(){
                    TempArr.push($(this).val());
                });
            }
      /*keyup事件调用 该方法，释放键盘按钮时 清空所有option 读取input内的值  与数组TempArr进行匹配

返回值大于-1时 在select 中追加option

*/     
            function SelectTip(flag){
            var TxtObj=$("#inputusername");
            var SelectObj=$("#username");
            var Arr=new Array();
            var match = /$("#username").val()/;
            SelectObj.html("");
            $.each(TempArr,function(index,element){
                //alert(element);
                console.info($("#inputusername").val());
                console.info(element);
                var result = element.indexOf($("#inputusername").val());
                console.info(result);
                if(result>-1){
                    SelectObj.append("<option value = '"+element+"'>"+element+"</option>");
                }
            });   
            }

/*在div之外的位置点击时隐藏select 在div内点击时 阻止事件上传到body */
            $("#click").click(function(event){   
                event=event||window.event;   
                event.stopPropagation(); //阻止事件冒泡  
            });

$(document).ready(function(){              
                Init();

/* 设置select 位置*/
                var pos = $("#inputusername").position();
                var height = $("#inputusername").height();
                pos.top = pos.top+height;
                $("#username").position(pos);

            });