输入框联想功能的实现
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>

浙公网安备 33010602011771号