输入框联想功能的实现
1
<TD class="dataField" align="left" width="35%"><asp:textbox id="txtProductID" runat="server" Width="180px" onkeyup="showtips()" onkeydown="enterTips()"></asp:textbox><asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" ControlToValidate="txtProductID" ErrorMessage="必填"></asp:requiredfieldvalidator>
2 <div id="Layerb" style="Z-INDEX: 50; LEFT: 480px; VISIBILITY: hidden; WIDTH: 138px; POSITION: absolute; TOP: 250px">
3 <select id='sel' multiple onkeydown='if(event.keyCode==13)_ctl0_txtProductID.value=value,sel.style.display="none",_ctl0_txtProductID.focus()'>
4 </select>
5 <script language="javascript">
6 var sel = document.getElementById("sel");
7 var productID = document.getElementById("_ctl0_txtProductID");
8 var showProd = document.getElementById("_ctl0_txtShowProd").value.split(",");
9 function showtips()
10
{
11
document.all['Layerb'].style.visibility = '';
12 if(sel.value!=productID.value)
13
{
14 var msg = new Array();
15 msg = showProd;
16 sel.style.display='';
17 sel.length=0;
18 var len=msg.length;
19 var re=new RegExp("^"+event.srcElement.value,"i")
20 for(i=0;i<len;i++) if(re.test(msg[i])==true) sel.add(new Option(msg[i],msg[i])),sel[0].selected=true;
21
}
22
}
23 function enterTips()
24 {
25 e=event.keyCode;
26 if(e==13) event.srcElement.value=sel.value,sel.style.display='none';
27 if(e==40) sel.focus();
28 }
29 document.onclick=function(){sel.style.display='none';}
30 </script>
31 </div>
32 </TD>
<TD class="dataField" align="left" width="35%"><asp:textbox id="txtProductID" runat="server" Width="180px" onkeyup="showtips()" onkeydown="enterTips()"></asp:textbox><asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" ControlToValidate="txtProductID" ErrorMessage="必填"></asp:requiredfieldvalidator>2
<div id="Layerb" style="Z-INDEX: 50; LEFT: 480px; VISIBILITY: hidden; WIDTH: 138px; POSITION: absolute; TOP: 250px">3
<select id='sel' multiple onkeydown='if(event.keyCode==13)_ctl0_txtProductID.value=value,sel.style.display="none",_ctl0_txtProductID.focus()'>4
</select>5
<script language="javascript">6
var sel = document.getElementById("sel");7
var productID = document.getElementById("_ctl0_txtProductID");8
var showProd = document.getElementById("_ctl0_txtShowProd").value.split(",");9
function showtips()10
{
11
document.all['Layerb'].style.visibility = '';12
if(sel.value!=productID.value)13
{
14
var msg = new Array();15
msg = showProd;16
sel.style.display='';17
sel.length=0;18
var len=msg.length;19
var re=new RegExp("^"+event.srcElement.value,"i")20
for(i=0;i<len;i++) if(re.test(msg[i])==true) sel.add(new Option(msg[i],msg[i])),sel[0].selected=true;21
}22
}23
function enterTips()24
{25
e=event.keyCode;26
if(e==13) event.srcElement.value=sel.value,sel.style.display='none';27
if(e==40) sel.focus();28
}29
document.onclick=function(){sel.style.display='none';}30
</script>31
</div>32
</TD>