jquery实现可编辑的下拉框( input + select )

时间:2023-03-10 01:37:48
jquery实现可编辑的下拉框( input + select )

HTML:

  <input id="inputModel" />
<select name="EngineModel" size="10" style="height: auto; margin-left: 120px; position: absolute; display: none;"></select>

Jquery:

 //获取select
var engine = $('select[name="EngineModel"]');
//页面加载,初始赋值select选项
$.get('engines.aspx', function (engineModels) {
engines = eval(engineModels);
for (var i = 0; i < engines.length; i++) {
engine.append('<option>' + engines[i].Model + '</option>');
}
})
//for (var i in engines) {
// engine.append('<option>' + engines[i] + '</option>');
// } //绑定值至select(可用于修改)
if ('<%=order.EngineModel%>') {
engine.val('<%=order.EngineModel%>');
} //select的change事件,选中的值赋给input
$('input[name="EngineModel"]').change(function() {
document.getElementById('inputModel').value = document.getElementById('SelectModel').options[document.getElementById('SelectModel').selectedIndex].value;
}) //可编辑select具体实现
var focus = false;
$("#inputModel").focus(function () {
focus = true;
$(this).next().css('display', 'block');
}).blur(function () {
if (focus) {
$(this).next().css('display', 'none');
}
}).keyup(function () {
var queryCondition = $("#inputModel").val().toLowerCase();
if (queryCondition.length != 0) {
engine.empty();
for (var i in engines) {
if (engines[i].toLowerCase().indexOf(queryCondition) != -1) {
engine.append('<option>' + engines[i] + '</option>');
}
}
} else {
for (var i in engines) {
engine.append('<option>' + engines[i] + '</option>');
}
}
}).next().mousedown(function () {
focus = false;
}).change(function () {
$(this).css('display', 'none').prev().val(this.value);
});