参考URL:参考demo
chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 (改参数=推荐)
chosen.jquery.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();//下拉框检索框架
$('#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);
}