select的可输入 匹配

<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);

            });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值