$(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>"
);
}
.hoho{
width
:
197
;
height
:
20px
!important
;
height
:
17px
;
margin-left
:
-180px
!important
;
margin-left
:
-179px
}
.sp{
margin-left
:
179px
;
width
:
18px
;
overflow
:
hidden
; }
.bo
4
{
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}
|
<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>
</select>
</span>
<input name="box4" id="box4" value="===请选择===" class="bo4" >
</div>
</td>
<td id="HTML" width="350">输入A试试</td>
</tr>
</table>