드롭다운 상자 텍스트 입력
<html>
<head>
<script src="jquery-1.4.4.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(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").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 type="text/css">
.hoho{width:197px;height:20px!important; height:17px;margin-left:-180px!important}
.hoho1{width:203px;height:24px!important; height:17px;margin-left:-180px!important;margin-top:1px}
.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>
</head>
<body>
<table width="440" border="0" align="center">
<tr>
<td>
<div style="position:relative;">
<span class="sp">
<![if !IE]>
<select id="hoho" name="hoho" class="hoho" onChange="setValue(this.selectedIndex)" width="197px">
<![endif]>
<!--[if IE]>
<select id="hoho" name="hoho" class="hoho1" onChange="setValue(this.selectedIndex)" width="197px">
<![endif]-->
<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>
</select>
</span>
<input name="box4" id="box4" value="=== ===" class="bo4" >
</div>
</td>
</tr>
</table>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
