jQuery chosen下拉框检索

参考URL：参考demo

chosen.jquery.js 搜索框只能从头匹配的解决思路+方法  （改参数=推荐）

chosen.jquery.js 搜索框只能从头匹配的解决思路+方法  （改源码，，，不推荐）

官方API及JS下载

效果图：

这里提供一下简单版的下载地址（JS源码已改为模糊匹配），类似上图的效果，自行导入jQuery,注意修改CSS文件中的图片路径为导入的图片

<%@include file="import.jsp" %>
<link rel="stylesheet" type="text/css" href="${ctx }/scripts/chosen.css">



  <select name="dept" style="width:
 150px;" id="dept" class="dept_select"> 
    <option value="部门1">部门1</option>
    <option value="部门2">部门2</option>
    <option value="部门3">部门3</option>
    <option value="部门4">部门4</option>
    <option value="部门5">部门5</option>
</select>

   <script type="text/javascript" src='${ctx }/scripts/chosen.jquery.js'></script>

    <script type="text/javascript"> 
    $('.dept_select').chosen();
    </script>

动态下拉框

注意： $('#cnaps_name_select').trigger(“chosen:updated”);//重置下拉框  
            $('#cnaps_name_select').chosen();//下拉框检索框架

<td  class="td_right">所属银行:</td>  
<td>  
<select name="bank_code" id="bank_code" class="input-text lh30" style="width: 150px;" οnchange="cnapsChange()">  
<option value=""></option>  
 <c:forEach items="${bankls}" var="item" varStatus="status">  
<option value="${item.bankcode }" <c:out value="${agent.bank_code eq item.bankcode?'selected':'' }" />>${item.bankname }</option>  
 </c:forEach>  
</select>                                       
<input type="hidden" id="bank_name" name="bank_name" value="${agent.bank_name }"   />  
                                  
</td>  
  
  
  
 <td class="td_right">开户行全称：</td>  
<td>  
<select type="text" id="cnaps_name_select" name="cnaps_name_select"  class="input-text lh30" οnchange="cnapsNameChange()"    style="width: 324px;" ></select>  
<input type="hidden" id="cnaps_name" name="cnaps_name" value="${agent.cnaps_name }"   />  
</td>  
  
  
  
function cnapsChange() {  
    var account_city = $('#account_city').val();  
    var bank_code = $('#bank_code').val();  
      
    var cnaps_no = $("#cnaps_no").val();  
    $('#cnaps_name_select').val('');  
    var obj=document.getElementById("cnaps_name_select");  
    obj.options.length=0;  
    $.ajax({  
        url:  ctx()+"/cnaps/cnapsBank?clscode=" + bank_code+"&citycode="+account_city,  
        dataType: "json",  
        success: function(data) {  
            obj.options.add(new Option('',''));  
            $.each(data.banklist, function(i, val) {  
                obj.options.add(new Option(val.BNKNAME,val.CNAPS));  
               if (cnaps_no == val.CNAPS) {                 
                   $("#cnaps_name_select").val(cnaps_no);                  
                   cnapsNameChange();  
                }  
            });  
            $('#cnaps_name_select').trigger("chosen:updated");//重置下拉框  
            $('#cnaps_name_select').chosen();//下拉框检索框架  
        }  
    });  
}  
  
function cnapsNameChange() {  
    var cnaps_name_select = $('#cnaps_name_select').val();  
    var cnaps_name = $("#cnaps_name_select").find("option:selected").text();  
    var bank_name = $("#bank_code").find("option:selected").text();  
//  alert("cnaps_name_select："+cnaps_name_select);  
    $("#cnaps_no").val(cnaps_name_select);  
    $("#cnaps_name").val(cnaps_name);  
    $("#bank_name").val(bank_name);  
}