jquery实现select下拉框可输入+联想关联option
2014-09-21 10:58
721 查看
下面代码摘自http://www.oschina.net/question/96791_12832
<script language="javascript" src="jquery-1.4.1.js"></script>
<script>
$(document).ready(function() {
var cus = 0;
var classname = "";
var arry = new Array();
var $autocomplete = $("<ul class='autocomplete'></ul>").hide().insertAfter("#box4");
$("#hoho").find("option").each(function(i, n) {
arry[i] = $(this).text()
});
$("#box4").focus(function(){if ($("#box4").val() == "===请选择==="){$("#box4").val(""); }});
$("#box4").blur(function(){if ($("#box4").val() == ""){$("#box4").val("===请选择==="); }});
$("#box4").keyup(function(event) {
if ((event.keyCode != 38) && (event.keyCode != 40) && (event.keyCode != 13)) {
$autocomplete.empty();
var $SerTxt = $("#box4").val().toLowerCase();
if ($SerTxt != "" && $SerTxt != null) {
for (var k = 0; k < arry.length; k++) {
if (arry[k].toLowerCase().indexOf($SerTxt) >= 0) {
$("<li title=" + arry[k] + " class=" + classname + "></li>").text(arry[k]).appendTo($autocomplete).mouseover(function() {
$(".autocomplete li").removeClass("hovers");
$(this).css({
background: "#3368c4",
color: "#fff"
})
}).mouseout(function() {
$(this).css({
background: "#fff",
color: "#000"
})
}).click(function() {
$("#box4").val($(this).text());
$autocomplete.hide()
})
}
}
}
$autocomplete.show()
}
var listsize = $(".autocomplete li").size();
$(".autocomplete li").eq(0).addClass("hovers");
if (event.keyCode == 38) {
if (cus < 1) {
cus = listsize - 1;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
} else {
cus--;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
}
}
if (event.keyCode == 40) {
if (cus < (listsize - 1)) {
cus++;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
} else {
cus = 0;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
}
}
if (event.keyCode == 13) {
$(".autocomplete li").removeClass();
$("#HTML").html("你选择的是<font color='red'>" + $(".autocomplete li").eq(cus).text()+"</font>");
$autocomplete.hide();
}
}).blur(function() {
setTimeout(function() {
$autocomplete.hide()
},
3000)
})
});
function setValue(index) {
var ddl = document.getElementById("hoho");
var Value = ddl.options[index].text;
document.getElementById("box4").value = Value
$("#HTML").html("你选择的是<font color='red'>" +Value+"</font>");
}
</script>
<style>
.hoho{width:197;height:20px!important; height:17px;margin-left:-180px!important; margin-left:-179px}
.sp{margin-left:179px;width:18px;overflow:hidden; }
.bo4{width:178px;position:absolute;left:0px!important;height:20px!important;top:0.5px!important; left:1px; top:0px; height:20px}
.autocomplete{list-style-type:none; margin:0px; padding:0px; border:#008080 1px solid }
.autocomplete li{font-size:12px; font-family:"Lucida Console", Monaco, monospace; font-weight:bold; cursor:pointer; height:20px; line-height:20px}
.hovers{ background-color:#3368c4; color:fff}
</style>
<BODY>
<table width="440" border="0" align="center">
<tr>
<td><div style="position:relative;">
<span class="sp">
<select id="hoho" name="hoho" class="hoho" onChange="setValue(this.selectedIndex)" >
<option>===请选择===</option>
<option value='0' >Java EE</option>
<option value='1' >Java SE</option>
<option value='2' >Java ME</option>
<option value='3' >Net</option>
<option value='4' >PHP</option>
<option value='5' >Ajax</option>
<option value='6' >JQuer</option>
<option value='6' >校长1123123</option>
<option value='6' >校长JQsdfuer</option>
<option value='6' >校长3asdfJasdfQuer</option>
<option value='6' >校长a23sdfsaJQuer</option>
<option value='6' >校长J232Quer</option>
</select>
</span>
<input name="box4" id="box4" value="===请选择===" class="bo4" >
</div>
</td>
<td id="HTML" width="350">输入A试试</td>
</tr>
</table>
</BODY>
<script language="javascript" src="jquery-1.4.1.js"></script>
<script>
$(document).ready(function() {
var cus = 0;
var classname = "";
var arry = new Array();
var $autocomplete = $("<ul class='autocomplete'></ul>").hide().insertAfter("#box4");
$("#hoho").find("option").each(function(i, n) {
arry[i] = $(this).text()
});
$("#box4").focus(function(){if ($("#box4").val() == "===请选择==="){$("#box4").val(""); }});
$("#box4").blur(function(){if ($("#box4").val() == ""){$("#box4").val("===请选择==="); }});
$("#box4").keyup(function(event) {
if ((event.keyCode != 38) && (event.keyCode != 40) && (event.keyCode != 13)) {
$autocomplete.empty();
var $SerTxt = $("#box4").val().toLowerCase();
if ($SerTxt != "" && $SerTxt != null) {
for (var k = 0; k < arry.length; k++) {
if (arry[k].toLowerCase().indexOf($SerTxt) >= 0) {
$("<li title=" + arry[k] + " class=" + classname + "></li>").text(arry[k]).appendTo($autocomplete).mouseover(function() {
$(".autocomplete li").removeClass("hovers");
$(this).css({
background: "#3368c4",
color: "#fff"
})
}).mouseout(function() {
$(this).css({
background: "#fff",
color: "#000"
})
}).click(function() {
$("#box4").val($(this).text());
$autocomplete.hide()
})
}
}
}
$autocomplete.show()
}
var listsize = $(".autocomplete li").size();
$(".autocomplete li").eq(0).addClass("hovers");
if (event.keyCode == 38) {
if (cus < 1) {
cus = listsize - 1;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
} else {
cus--;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
}
}
if (event.keyCode == 40) {
if (cus < (listsize - 1)) {
cus++;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
} else {
cus = 0;
$(".autocomplete li").removeClass();
$(".autocomplete li").eq(cus).addClass("hovers");
var text = $(".autocomplete li").eq(cus).text();
$("#box4").val(text)
}
}
if (event.keyCode == 13) {
$(".autocomplete li").removeClass();
$("#HTML").html("你选择的是<font color='red'>" + $(".autocomplete li").eq(cus).text()+"</font>");
$autocomplete.hide();
}
}).blur(function() {
setTimeout(function() {
$autocomplete.hide()
},
3000)
})
});
function setValue(index) {
var ddl = document.getElementById("hoho");
var Value = ddl.options[index].text;
document.getElementById("box4").value = Value
$("#HTML").html("你选择的是<font color='red'>" +Value+"</font>");
}
</script>
<style>
.hoho{width:197;height:20px!important; height:17px;margin-left:-180px!important; margin-left:-179px}
.sp{margin-left:179px;width:18px;overflow:hidden; }
.bo4{width:178px;position:absolute;left:0px!important;height:20px!important;top:0.5px!important; left:1px; top:0px; height:20px}
.autocomplete{list-style-type:none; margin:0px; padding:0px; border:#008080 1px solid }
.autocomplete li{font-size:12px; font-family:"Lucida Console", Monaco, monospace; font-weight:bold; cursor:pointer; height:20px; line-height:20px}
.hovers{ background-color:#3368c4; color:fff}
</style>
<BODY>
<table width="440" border="0" align="center">
<tr>
<td><div style="position:relative;">
<span class="sp">
<select id="hoho" name="hoho" class="hoho" onChange="setValue(this.selectedIndex)" >
<option>===请选择===</option>
<option value='0' >Java EE</option>
<option value='1' >Java SE</option>
<option value='2' >Java ME</option>
<option value='3' >Net</option>
<option value='4' >PHP</option>
<option value='5' >Ajax</option>
<option value='6' >JQuer</option>
<option value='6' >校长1123123</option>
<option value='6' >校长JQsdfuer</option>
<option value='6' >校长3asdfJasdfQuer</option>
<option value='6' >校长a23sdfsaJQuer</option>
<option value='6' >校长J232Quer</option>
</select>
</span>
<input name="box4" id="box4" value="===请选择===" class="bo4" >
</div>
</td>
<td id="HTML" width="350">输入A试试</td>
</tr>
</table>
</BODY>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于jQuery实现select下拉选择可输入附源码下载
- input+select(multiple) 实现下拉框输入值
- jQuery实现select下拉框样式美化效果
- jQuery ui autocomplete实现联想输入下拉菜单
- ajax结合jQuery autocomplete 实现类似百度搜索一样的输入联想
- jQuery 解决 IE 6/7/8 BUG：下拉框select设宽度时option超出显示不全
- 一般操作需要导入的jquery包(jquery.js包)和 jquery操作select下拉列表(取值及设置选中某一个option)
- jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)
- jquery获取select中的option的text值|| PHP图片缩放函数:实现等比例不失真缩放
- 两个select之间option的互相添加操作(jquery实现)
- 用Jquery实现（下拉框）select元素的透明和圆角！（源码实例）
- Jquery 文本框输入内容，自动匹配select 下拉框内容
- input+select(multiple) 实现下拉框输入值
- jquery 实现两个select之间option的转移
- 可输入可联想的下拉列表的实现——Ext ComboBox
- 使用Jquery来实现可以输入值的下拉选单 雏型
- jquery multiselect插件实现下拉多选选框的效果
- jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）