input框结合[chosenJquery]下拉框可输入可搜索
【html:】
.....
<td style="38%;text-align: left;padding-top: 13px;">
<input type="text" name="COLLECTION_NAME" id="COLLECTION_NAME" value="${pd.COLLECTION_NAME}" onblur="codeByName()" maxlength="50" placeholder="这里输入用例集名称" title="用例集名称" style="98%;"/>
<input type="hidden" id="COLLECTION_ID" value=""/>
</td>
.....
【js：】
var arrayList;
//用例集名称输入框智能搜索(加载页面时ajax获取下拉列表数据，然后获取焦点时显示列表[一次加载多次使用])
$(function() {
var availableTags = [];
$.ajax({
type: "POST",
url: '<%=basePath%>cases/getCollectionName.do',
data: {},
dataType:'json',
cache: false,
success: function(data){
if("success" != data.result){
alert("出错啦，请与管理员联系！");
return false;
}else{
//availableTags = data.jsonArray;
$.each(data.jsonArray,function(index,jsonArrayList){
arrayList = data.jsonArray;
var strval = {label:jsonArrayList.COLLECTION_NAME,value:jsonArrayList.COLLECTION_NAME,id:jsonArrayList.COLLECTION_ID,code:jsonArrayList.COLLECTION_CODE};
availableTags.push(strval);
});
}
}
});
//定义下拉框列表
$("#COLLECTION_NAME").autocomplete({
minChars:0,
minLength: 0,
autoFill:true,
matchContains:true,
mustMatch:true,
matchSubset:true,
cacheLength:20,
source:availableTags,
/* function(request,response){
response($.map(availableTags,function(item){
return {
label:item.label,//下拉框显示值
value:item.value,//选中后，填充到下拉框的值
id:item.id,//选中后，填充到id里面的值
code:item.code//选中后，填充到code里面的值
}
}));
}, */
select : function(event, ui) {
$(this).value = ui.item.label;
$("#COLLECTION_NAME").val(ui.item.value);
$("#COLLECTION_ID").val(ui.item.id);
$("#COLLECTION_CODE").val(ui.item.code);
//event.preventDefault();//阻止事件默认行为，防止输入框默认取ui.item.value
return false;
}
}).focus(function(){
$(this).autocomplete("search");
return false;
});
});
//在input输入框按backspace(退格键)时清空valu值
$(document).bind("keydown",function(e){
e = e ? e : event;
if(e.keyCode == 8){
var target=$.event.fix(e).target;
if($(target).attr("id") == "COLLECTION_NAME"){
$(target).val("");
forbidBackSpace(e);
}
}
});
//清空只读文本框中的用例集编号
function forbidBackSpace(e) {
var ev = e || window.event; //获取event对象
var obj = ev.target || ev.srcElement; //获取事件源
var t = obj.type || obj.getAttribute('type'); //获取事件源类型
//获取作为判断条件的事件类型
var vReadOnly = obj.readOnly;
var vDisabled = obj.disabled;
//处理undefined值情况
vReadOnly = (vReadOnly == undefined) ? false : vReadOnly;
vDisabled = (vDisabled == undefined) ? true : vDisabled;
//当敲Backspace键时，事件源类型为密码、多行文本的，则退格键失效
var flag2 = ev.keyCode == 8 && t != "password" && t == "text"
&& t != "textarea";
//判断
if (flag2) {
var startIsFocus = $("#COLLECTION_CODE").is(":focus");
if (false == startIsFocus) {
$("#COLLECTION_CODE").val("");
}
return event.returnValue = false;
};
}
//禁止后退键 作用于Firefox、Opera
document.onkeypress = forbidBackSpace;
//禁止后退键 作用于IE、Chrome
document.onkeydown = forbidBackSpace;
//手动填入用例集名称联动用例集合编号
function codeByName(){
$.each(arrayList,function(index,arrayList){
if(arrayList.COLLECTION_NAME == $("#COLLECTION_NAME").val()){
$("#COLLECTION_CODE").val(arrayList.COLLECTION_CODE);
$("#COLLECTION_ID").val(arrayList.COLLECTION_ID);
}
});
}