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

多个框架实现下拉搜索的功能，非常的实用，强烈建议收藏

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

类型一：

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

    
        
        
        
.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;}

    
    
        
    
    
        01
        03
        04
        101
        102
        103
        104
        105
        106
    
    
    

    
    

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 
    

效果如下

类型二 ：

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

类型三

select2用法说明
Amaze UI styled jQuery Chosen plugin 插件实现下拉搜索功能
效果如下：

项目地址：https://github.com/amazeui/chosen

类型四

select2实现下拉功能



html 代码：

    
    
    
    
    
    
    select2用法说明
    
        h1,h2,h3{
            text-align: center;
        }
        .select1{
            margin: 60px auto 0;
            width: 200px;
        }
        .select1>span{
            width: 100% !important;
        }
    

    select2用法说明
    具体用法看代码（包括在angular中的用法）
    更多功能用法请百度搜索“select2”去官网查看

    
        
             西瓜
            苹果
            香蕉
            菠萝
            桃子
        
        获取选中
    

    $(function(){
        $('.mySelect').select2();
    })
    function getV(){
        alert("code: "+$('.mySelect').val()+" text: "+$('.mySelect').find("option:selected").text())
    }

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

项目结构