Effect:

code is as follows:

<! PUBLIC DOCTYPE HTML "-////W3C DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> Can edit down box method -- woody. Wu
<Style type="text/CSS" >
cssINPUT
{
height: 19px;
the padding: 3px;
padding - left: 3px;
padding - right: 0px;
margin: 0px;
border: 1px SOLID #C0C0C0;
the font-family: song typeface, arial.
the font - size: 9 pt;

} select_div_list
{
position: absolute;
border: 1px solid black;
background - color: White;
overflow: hidden;
overflow - y: auto;

} select_div_list_ul
{
margin: 0px;
the padding: 0px;
the list - style - type: none.

} select_div_list_ul li
{
cursor: pointer;
padding - left: 3px;
the font-family: song typeface, arial.
the font - size: 9 pt; * the padding: 0px; * height: 20px; _height: 14px; _margin: 0px; _height: 14px; * margin: 0px; The line - height: 14px; }
selectSPAN
{
background - color: Yellow;

} </style>
<The script type="text/javascript" SRC="http://www.script-home.com//article/Js/jquery-1.4.2.min.js" ></script>
<The script type="text/javascript" >
var inputID="input1";
var selectID="select1";
var widt=0;
var inputWi=0;
var he=0;
$(function() {
inputID="input1";
selectID="select1";
widt=200;
inputWi=widt - 20;
he=$("#user").height() - 41;
var offset=$("input[id=input1]").offset();
$("#" + selectID).change(function() {
var newvar=$("#" + selectID).find("option:selected").text();
$("#" + inputID).val(newvar);
}).click(function() {
$("#select_div_on_key" + selectID).remove();
}).css({ "display": "block", "width": widt + "px", "z-index": 1, "clip": "rect(0px " + widt + "px 51px 151px)" });
$("#" + inputID).keyup(function() {
ShowSelectCombo();
}).click(function() {
ShowSelectCombo();
}).css({ "z-index": 2, "width": inputWi + "px" }); ;
});
function ShowSelectCombo () {
var pob=$(" #"+ inputID);
var v=pob. Val ();
var off=pob. Offset ();
var wi=pob. Width () + 16;
var tp=off. Top + pob. Height () - 100 + 7;
var lef=off. Left - 200 + 2;
var HTML="<div class=" select_div_list 'id=' select_div_on_key selectID "+ +" "style=" width: "+ wi +"px; top: "+ tp +"px; left: "+ lef +"px; '><ul class=' select_div_list_ul '>" ;
$(" #"+ selectID). Find (" option".) each (function () {
var tk=$(this);
HTML +="<li val='" + tk. Val () +"' ht='" + encodeURIComponent (tk) HTML ()) + "' >"+ tk. The HTML (). The replace (v," <span class='selectSPAN' >"+ v +" </span>) "+" </li> ";
}); <
HTML +="/ul> </div>" ;
var ulDIV=$(" #select_div_on_key + selectID ");
ulDIV. Remove ();
$(" #user "), append (HTML);
var ulDIV=$(" #select_div_on_key + selectID ");
var hei=ulDIV. Find (" ul "). The height ();
var newHeight=hei >He? He: hei;
ulDIV. CSS ({height: newHeight + "px"});
ulDIV. Find (" li "). The hover (function () {$(this).
CSS ({" background - color ":" #316 ac5} ");
}, function () {$(this).
CSS ({" background - color ":" white "});
});
ulDIV. Find (" li "). Click (function () {
var ki=$(this);
var va=ki. Attr (" val ");
var HTM=ki. Attr (" ht ");
HTM=decodeURIComponent (HTM);
$(" #"+ inputID). Val (HTM);
$(" #" + selectID). Val (va);
ulDIV. Remove ();
});

} </script>
</head>
<Body>
<The form name="form1" method="post" action=": QQQ. Aspx" id="form1" >
<Div>
<Input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="http://www.script-home.com/wEPDwULLTIxMjQ5OTYwOTdkZH49VftoWVz/vaIL4f2byf4/w86b"/>
</div>
<Div>
<Input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="http://www.script-home.com/wEWDwL15JrvCgL2jaW0BgL3jaW0BgL0jaW0BgL1jaW0BgLyjaW0BgLzjaW0BgLwjaW0BgLujaW0BgL3jeW3BgKm4u6hCAL3je23BgL3jdG3BgL3jdW3BgL3jdm3BnqAGtu2PbiTi9dWHvWrW6QCqrYo"/>
</div>
<Div style='position: absolute; Top: 100px; Width: 500px; Left: 200px; Padding: 10px;
height: 400px; Border: 1px solid red; 'id=' user '>
<Div>
<Div style='overflow: hidden; Margin - top: 10px; Height: 30px; '>
<Input the id="input1" name="input1" type="text" class="cssINPUT 'style=' _height: 20px;
* height: 13px; Display: block; Float: left; Position: absolute; Border - right: 0px; '/>
<Select the name="select1" id="select1" class="cssINPUT" style="float: left;
display: none; height: 27px; position: absolute; cursor: pointer; margin - left: 2px;
the padding: 0px;" >
<The option value="http://www.script-home.com//article/1" >Body and chassis finishing equipment </option>
<The option value="http://www.script-home.com//article/2" >Vacuum suction cups </option>
<The option value="http://www.script-home.com//article/3" >Oxygen/acetylene cutting tools </option>
<The option value="http://www.script-home.com//article/4" >Cold riveting machine </option>
<The option value="http://www.script-home.com//article/5" >Big market satan </option>
<The option value="http://www.script-home.com//article/6" >Big brush </option>
<The option value="http://www.script-home.com//article/7" >Article 30 </option>
<The option value="http://www.script-home.com//article/9" >Big market </option>
<The option value="http://www.script-home.com//article/20" >Bodywork repair machine (pion) </option>
<The option value="http://www.script-home.com//article/1022" >Bulldog </option>
<The option value="http://www.script-home.com//article/22" >Plastic machine </option>
<The option value="http://www.script-home.com//article/23" >Lifting machine </option>
<The option value="http://www.script-home.com//article/24" >Car lay plate </option>
<The option value="http://www.script-home.com//article/25" >Air conditioning refrigerant filling machine </option>
</select>
</div>
</div>
</form>
</body>
</html>


This concludes the body part