仿下拉框，可选择，可输入，可匹配

最新推荐文章于 2022-11-04 09:04:42 发布

madinc

最新推荐文章于 2022-11-04 09:04:42 发布

阅读量897

点赞数 1

分类专栏：前端文章标签：下拉框-输入-匹配

本文链接：https://blog.csdn.net/madinc/article/details/49928117

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<style type="text/css">
    #page{width: 500px; margin: 0 auto; text-align: left;}
    #test{width: 212px; padding: 2px; height: 22px; border: 1px solid #ddd; margin: 0 5px 0 0;}
    #test option{padding: 2px 5px;}
    #test option:first-child{display: none;}
    #pre{position:relative; float: right;}
    #itest{width: 190px; padding: 2px 15px 2px 5px; margin-bottom: -1px; background: url(http://bbs.blueidea.com/data/attachment/album/201410/28/114755leueqeys1ps8dtzy.jpg.thumb.jpg) no-repeat scroll right center; border: 1px solid #ccc; box-shadow: 0 1px 0 0 #eee inset; cursor: default;}
    /*#itest:focus{cursor: text;}*/
    #dtest{width: 210px; border: 1px solid #ddd; border-radius: 0 0 3px 3px; display: none;}
    .soption{display: block; padding: 2px 5px;}
    .soption:hover{background: #f9f9f9; border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; padding: 1px 5px;}
</style>


<div id="page">
    <select id="test" name="test" style="display:none">
<option value="0">--请选择--</option>
        <option value="1">1</option>
        <option value="2">12</option>
        <option value="3">13</option>
        <option value="4">14</option>
        <option value="5">16</option>
        <option value="6">17</option>
        <option value="10">101</option>
        <option value="20">102</option>
        <option value="30">103</option>
        <option value="40">104</option>
        <option value="50">105</option>
        <option value="60">106</option>
        <option value="60">106</option>
        <option value="60">106</option>
    </select>
</div>

<script type="text/javascript">
(function($){
    var input = '<div id="pre"><input id="itest" type="text" placeholder="--请选择--">';
    var strDiv = '<div id="dtest">';
    var strSpan = '';
    var L = $('#test option').size();

    for(var i = 1; i < L; i ++){
        strSpan += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
    }
    strDiv += strSpan + '</div></div>';
    $('#test').after(input + strDiv);
    //初始化结束
    //
    //
    $(document).on('focus','#itest',function(){//获得焦点，模仿select，显示模拟下拉框
        var st = $(this).val().trim();
        if(st == ''){
            $('#dtest').html(strSpan);
        }
        else{
            var strDiv2 = '';
            for(var i = 0; i < L; i ++){
                var html = $('#test option').eq(i).html();
                if(html.match(st)){
                    strDiv2 += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
                }
            }
            $('#dtest').html(strDiv2);
        }
        $('#dtest').slideDown(100);  //以滑动方式显示隐藏
    });

    $(document).on('blur','#itest',function(){//失去焦点，隐藏模拟下拉框
        $('#dtest').slideUp(250); //以滑动方式显示隐藏的
    });

    $(document).on('keyup','#itest',function(){//输入信息，自动匹配，暂时不支持鼠标右键
        var st = $(this).val().trim();
        if(st == ''){
            $('#dtest').html(strSpan);
            return false;
        }
        var strDiv2 = '';
        for(var i = 0; i < L; i ++){
            var html = $('#test option').eq(i).html();
            if(html.match(st)){
                strDiv2 += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
            }
        }
        $('#dtest').html(strDiv2);
    });

    $(document).on('mousedown','.soption',function(){//选择下拉选项
        var html = $(this).html();
        var val = $(this).data('val');
        $('#itest').val(html).data('val',val).blur();
        $('#test').val(val);
    });

})(jQuery);
</script>
</body>
</html>