jQuery 下拉框输入匹配提示选项

做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下:

图示

 

HTML代码

 

        <div style="width: 540px;">
                 <label class="control-label sr-only" for="search_dchannel_repo"></label>
                 <input class="form-control search-for-select" id="search_dchannel_repo" placeholder="Search" forselect="sel_all_apps" type="text">
                 <span class="glyphicon glyphicon-search form-control-feedback"></span>
                 <div style="padding-top:8px;">                        
                     <select id="sel_all_apps" class="form-control" multiple="multiple" size="10">
                    
                        <option class="proxy_app_option" value="48">测试应用</option>
                     
                        <option class="proxy_app_option" value="49">测试应用2</option>
                     
                        <option class="proxy_app_option" value="50">1323</option>
                     
                        <option class="proxy_app_option" value="51">僵尸战机</option>
                     
                        <option class="proxy_app_option" value="52">新游戏</option>

                        <option class="proxy_app_option" value="53">测试APP</option>
                     
                        <option class="proxy_app_option" value="54">测试APP</option>
                     
                        <option class="proxy_app_option" value="55">测试APP</option>
                     
                     </select>
                </div>
            </div>

 

 

 

 

jQuery代码

 1 $(".search-for-select").keyup(function(){
 2     var select = $(this).attr("forselect");
 3     var keyvalue = $(this).val();
 4     $("#" + select).find("option").each(function(){
 5         if($(this).html().indexOf(keyvalue) >= 0 || !keyvalue){
 6             $(this).show();
 7         }else{
 8             $(this).hide();
 9         }
10     });
11     return false;
12 });

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。