兼容ie、火狐等浏览器实现input框实时输入筛选下拉列代码,Js代码库,德仔网

代码语言

代码分类

【Js】兼容ie、火狐等浏览器实现input框实时输入筛选下拉列

作者:Lionel / 发布于2016/3/3/ 444

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input实时输入</title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<style>
*{box-sizing: border-box;}
span{display:inline-block;vertical-align:middle; width:18px;height:20px; background:url(img/combo_arrow.png) right center  no-repeat;border:1px solid #ddd;border-left:none;cursor:pointer;background-color:#f2f2f2;}
span:hover{background-color:#e6e6e6;}
input{display:inline-block;vertical-align:middle;border:none;border:1px solid #ddd;padding-right:20px;width:182px;border-right:none;height:20px;}
.list{position:relative;}
.combo-p{display:none; height:200px;overflow:hidden;overflow-y: scroll;width:200px;border:1px solid #ddd;border-top:none;}
</style>
</head>
<body>
<div class="list">
    <input id="ct" type="text"/><span id="span"></span>
    <div class="combo-p" id="combo">
        啊啊啊啊啊啊啊啊啊啊
        1111
        1111
        1111
        222
        222
        1111
        222
        222
        222
        222
        222
    </div>
</div>
<script>
var browserName=navigator.userAgent.toLowerCase();
//判断浏览器类型
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
    var nspan=document.getElementById('span');
    var combo = document.getElementById('combo');
    //ie根据input框输入的内容对下拉列表进行筛选
    document.getElementById('ct').attachEvent('onpropertychange',function(o){
        var value=document.getElementById('ct').value;
        var lis = combo.getElementsByTagName('p');
        combo.style.display="block";
        for(var i=0;i<lis.length;i++){
            var html=lis[i].innerHTML;
            var index=html.indexOf(value+"");
            if(index>=0){
               lis[i].style.display="block";
            }else{
                lis[i].style.display="none";
            }
        }
    });
    nspan.attachEvent('onclick',function(){
        if(combo.style.display=="block"){
            combo.style.display="none";
        }else{
            combo.style.display="block";
        }
    });
}else{  
    //其他浏览器根据input框输入的内容对下拉列表进行筛选
    $('input').bind('input propertychange', function() {
      var value=$(this).val();
        $(".combo-p").show();
        $(".combo-p p").hide();
        $(".combo-p p").each(function(){
            var index=$(this).text().indexOf(value+"");
            if(index>=0){
                $(this).show();
            }
        });
    });  
    $(".list span").click(function(){
        if($(".combo-p").is(":hidden")){
            $(".combo-p").show();
        }else{
            $(".combo-p").hide();
        }
    });
}
</script>
</body>
</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

Lionel贡献的其它代码(1)

.兼容ie、火狐等浏览器实现input框实时输入筛选下拉列