原创

解决方案:前端下拉框带搜索的实现

开发工具使用的Hbuilder，一直在用这个工具写前端，调样式，感觉很棒！官网

类型一：

先自己手撸一个下拉搜索，毕竟自己的前端还是可以(直接复制粘贴后执行代码就可)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
.newinput{ width:150px;padding: 2px 0px 2px 0px; margin-bottom: -1px; background: url(114755leueqeys1ps8dtzy.jpg.thumb.jpg) no-repeat scroll right center; border: 1px solid #ccc; box-shadow: 0 1px 0 0 #eee inset; cursor: default;}
.newinput:focus{cursor: text;}
.input_div{ width:150px;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>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
    </head>
    <body>
        <div class="pre" id="input1">
    <input class="newinput" type="text" placeholder="--请选择--">
    <div class="input_div" style="display: none;">
        <span class="soption" data-val="1">01</span>
        <span class="soption" data-val="3">03</span>
        <span class="soption" data-val="4">04</span>
        <span class="soption" data-val="10">101</span>
        <span class="soption" data-val="20">102</span>
        <span class="soption" data-val="30">103</span>
        <span class="soption" data-val="40">104</span>
        <span class="soption" data-val="50">105</span>
        <span class="soption" data-val="60">106</span>
    </div>
    <input class="savedata" type="hidden" value=''>
    <div style="clear:both"></div>
</div>

    <input class="savedata" type="hidden" value=''>
    <div style="clear:both"></div>
</div>
<script type="text/javascript">
function inputSelect(div_id,saveval_id){
    this.input_id=$("#"+div_id+' .newinput');
    this.input_div=$("#"+div_id+' .input_div');
    this.input_id.focus(function(){
        $("#"+div_id+' .input_div').show();
    });
    this.input_id.keyup(function(){
        var st = $(this).val().trim();
        var _this=this;
        if(st == ''){
            $("span",$("#"+div_id+' .input_div')).show();
            $("#"+div_id+' .input_div').show();
            var selval=0;
            $(".savedata",$("#"+div_id)).val(selval);
            return false;
        }
        var L = $("span",$("#"+div_id+' .input_div')).size();
        for(var i = 0; i < L; i ++){
            var elem=$("span",$("#"+div_id+' .input_div')).eq(i);
            var html = $("span",$("#"+div_id+' .input_div')).eq(i).html();
            if(html.match(st)){
                elem.show();
            }
            else{
                elem.hide();
            }
        }
        var selval=-1;
        if($("span:visible",$("#"+div_id+' .input_div')).length==1 || $("span:visible",$("#"+div_id+' .input_div')).eq(0).html()==st){
            selval= $("span:visible",$("#"+div_id+' .input_div')).eq(0).attr('data-val');
        }
        else{
            selval=99999;
        }
        $(".savedata",$("#"+div_id)).val(selval);
        $("#"+div_id+' .input_div').show();
    });
    this.input_id.blur(function(){
        $("#"+div_id+' .input_div').slideUp(50);
    });
    $("span",$("#"+div_id+' .input_div')).mousedown(function(){
        var val = $(this).data('val');
        $("#"+div_id+' .newinput').val($(this).html());
        $(".savedata",$("#"+div_id)).val(val);
    })
}
new inputSelect("input1","txt1");
new inputSelect("input2","txt2");
</script>
    </body>
</html>

效果如下
file

类型二：

layui的下拉搜索
大神作品，自己去网站巴拉巴拉吧。下载下来自己可以直接使用。很棒！亲测，风格样式也有很多。
官方地址：
https://faysunshine.com/layui/template/index.html?0-3
效果图
file
file

类型三

select2用法说明
Amaze UI styled jQuery Chosen plugin 插件实现下拉搜索功能
效果如下：
file
项目地址：https://github.com/amazeui/chosen

类型四

select2实现下拉功能
file
file
file
html 代码：

<!-- demo.html  select2用法说明 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="select2.min.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="select2.full.min.js"></script>
    <title>select2用法说明</title>
    <style>
        h1,h2,h3{
            text-align: center;
        }
        .select1{
            margin: 60px auto 0;
            width: 200px;
        }
        .select1>span{
            width: 100% !important;
        }
    </style>
</head>
<body>
    <h1>select2用法说明</h1>
    <h2>具体用法看代码（包括在angular中的用法）</h2>
    <h3>更多功能用法请百度搜索“select2”去官网查看</h3>

    <div class="select1">
        <select class="mySelect">
            <option value="xigua"> 西瓜</option>
            <option value="pingguo">苹果</option>
            <option value="xiangjiao">香蕉</option>
            <option value="boluo">菠萝</option>
            <option value="taozi">桃子</option>
        </select>
        <button class="select1" onclick="getV()">获取选中</button>
    </div>
<script>
    $(function(){
        $('.mySelect').select2();
    })
    function getV(){
        alert("code: "+$('.mySelect').val()+" text: "+$('.mySelect').find("option:selected").text())
    }
</script>
<!-- 说明：
            1.select2依赖于jquery，要引入select2.min.css、select2.full.min.js
            2.如果要多语言，请去官网下载多语言js；此select2.full.min.js文件，我把搜索无结果时改成了中文。

    用法：
            1.以上用法是一般用法
            2.下面介绍用于angular ng-repeat渲染出的dom的用法

                a.  html代码是：
                    <div class="tt_select2">
                        <select class="js-example-basic-single">
                            <option time-out ng-repeat="x in data" value="{{x.className}}" ng-bind="x.className"></option>
                        </select>
                    </div>
                b.  要在n-repeat渲染结束后再执行  $('.mySelect').select2()，所以调用指令，延迟执行;
                c.  自定义指令代码：
                    app.directive('timeOut',function($timeout){
                        return { 
                            link: function(scope,element,attr){ 
                                $timeout(function(){ 
                                    $('.js-example-basic-single').select2();
                                },0) 
                            } 
                        } 
                    });
-->
</body>
</html>