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

浏览数：30 / 时间：2015年06月09日

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

图示

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