首页 > 代码库 > jQuery 下拉框输入匹配提示选项
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 = http://www.mamicode.com/$(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 });
jQuery 下拉框输入匹配提示选项
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。