話不多說，直接上代碼，自行引入jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.second select {
width: 11%;
height: 106px;
margin: 0px;
outline: none;
border: 1px solid #999;
margin-top: 35px;
}
.second input {
width: 167px;
top: 9px;
outline: none;
border: 0pt;
position: absolute;
line-height: 30px;
left: 8px;
height: 30px;
border: 1px solid #999;
}
.second ul {
position: absolute;
top: 27px;
border: 1px solid #999;
left: 8px;
width: 125px;
line-height: 16px;
}
.ul li{
list-style: none;
width: 161px;
margin-left: -40px;
padding-left: 4px;
}
.blue {
background:#1e91ff;
}
</style>
</head>
<body>
<div class="second">
<input type="text" name="makeupCo" id="makeupCo" class="makeinp" οnfοcus="setfocus(this)" οninput="setinput(this);" placeholder="請選擇或輸入"/>
<select name="makeupCoSe" id="typenum" οnchange="changeF(this)" size="10" style="display:none;">
<option value="">1</option>
<option value="">12</option>
<option value="">123</option>
<option value="">1234</option>
<option value="">12345</option>
<option value="">123456</option>
<option value="">1234567</option>
<option value="">12345678</option>
</select>
</div>
<script src = "js/jquery.js"></script>
<script type = "text/javascript">
var TempArr=[];
$(function(){
$("#typenum option").each(function(index, el) {
TempArr[index] = $(this).text();
});
$(document).bind('click', function(e) {
var e = e || window.event;
var elem = e.target || e.srcElement;
while (elem) {
if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {
return;
}
elem = elem.parentNode;
}
$('#typenum').css('display', 'none');
});
})
function changeF(this_) {
$(this_).prev("input").val($(this_).find("option:selected").text());
$("#typenum").css({"display":"none"});
}
function setfocus(this_){
$("#typenum").css({"display":""});
var select = $("#typenum");
select.empty();
setinput(this_);
if(!select){
for(i=0;i<TempArr.length;i++){
var option = $("<option></option>").text(TempArr[i]);
select.append(option);
}
}
}
function setinput(this_){
var select = $("#typenum");
select.html("");
for(i=0;i<TempArr.length;i++){
if(TempArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){
var option = $("<option></option>").text(TempArr[i]);
select.append(option);
}
}
}
</script>
</body>
</html>
