Implementation method of Web combo box

Web

Because there is no combo box in the HTML control, the Web combo box needs to be constructed in a special way, and of course there are many ways to construct it:

First, the use of text boxes and list boxes stacked, this need to use CSS clip, use more, but need absolute positioning, and positioning needs to be accurate.

Second text box + A new page, this method is used a lot, that is, load the page only loaded text box, only when necessary by opening a new page to open the list.

Third, use the text box and a list container side-by-side, but the list container needs to be defined as absolute positioning, but not to its left and top definitions. This container can be either a <div><span><table> container or a list control.

Here's a third way to implement the combo box, which uses a container that is <div><table></table></div>, and supports dynamic filtering, which is when you enter text in a text box for filtering, You can automatically filter the list based on the text you enter, and also narrow the selection.

The core code is as follows:

<script language= "JavaScript" >
Dynamic list Start////////////////////////////////
Used by a text box and a div to dynamically select a list based on an alias
var ifmouseover=0;
var pata=/[^\x00-\xff]+/; A regular expression that is not filtered when text in the text box conforms to the regular
function Dl_mouseover (p1)
{
Ifmouseover=1;
}
　
function Dl_mouseout (p1)
{
ifmouseover=0;
}
　
　
function Dl_showdiv (p1)
{
var Divobj=document.getelementbyid (p1);
if (divobj)
{
if (divobj.style.display== ' none ')
Divobj.style.display= ';
Else
Divobj.style.display= ' None ';
}
}
　
　
function Dl_hidediv (p1)
{
var Divobj=document.getelementbyid (p1);
if (divobj)
{
if (divobj.style.display== ' && ifmouseover==0)
Divobj.style.display= ' None '; }
}
　
　
function Dl_insertdata (P1,P2,P3)
{
var Divobj=document.getelementbyid (p2);
var Textobj=document.getelementbyid (p3);
if (textobj) Textobj.value=p1.innertext;
if (divobj) {divobj.style.display= ' none ';}
}
var s_value= "";
function Dl_sfilter (P1,P3,P5,P7)
{
var Kcode=event.keycode;
var ccds=document.selection.createrange ();
Ccds.pastetext= ';
var Tmpp1=p1.value;
if (Pata.test (tmpP1)) return false;
Document.selection. Clear ();
if (Tmpp1!=s_value)
{
S_VALUE=TMPP1;
if (document.getElementById (p3))
document.getElementById (p3). style.display= ';
for (Var n=0;n<p5.length;n++)
{
if (P5[n].indexof (tmpP1) >=0)
{
if (document.getElementById (P7 + N))
document.getElementById (P7 + N). style.display= ';
}
Else
{
if (document.getElementById (P7 + N))
document.getElementById (P7 + N). style.display= ' None ';
　　　　　　　
}
}
}
}
Dynamic List End////////////////////////////////////
</script>
　
　
<% Sub Create_dy_select (P_arrayname,byref p_rs,p_alias_field,p_main_field,p_inputname,p_divid,p_tr_id)
' P_arrayname-generated JS array name
' P_rs database recordset
' P_alias_field name, used for filtering, if the same as P_main_field, is our common combo box filter method
' P_main_field primary field name
' P_inputname text box name
' ID of the P_divid div container
' p_tr_id table row ID prefix
R_count=p_rs. RecordCount
If R_count>0 Then
%>
<!--dynamic List code start-->
<script language= "JavaScript" >
var <%=p_arrayname%>=new Array (<%=r_count%>)
var mm=0;
</script>
<%end if%>
<div id= "<%=p_divid%>" style= "border:1 solid #FF0000 Cursor:default;width:150;height:200;overflow-y:auto; Background-color: #e0e0e0;p osition:absolute;display: ' None ' >
<table width=100%>
　　　　
<%
If R_count>0 Then
Dim i
I=0
Do as not p_rs. Eof
O_alias=p_rs (P_alias_field)
%>
<script language= "JavaScript" >
<%=p_arrayname%>[mm]= ' <%=o_alias%> ';
mm++;
</script>
<tr id= "<%=p_tr_id%><%=i%>" &GT;&LT;TD width=100% >
<%=p_rs (P_main_field)%>
</td></tr>
<% i=i+1
P_rs. MoveNext
Loop
End If
%>
</table>
</div>
<!--dynamic List code end-->
<%end sub%>

Call Method:

<% s_arrayname = "Js_array_1"
S_alias_field = "Cz_alias"
S_main_field = "Cz_name"
S_inputname = "CZ"
S_divid = "Selectlist_1"
s_tr_id = "Tr_id_1"
%>
<input name= "<%=s_inputname%>" type= "text" onblur= "Dl_hidediv (' <%=s_divid%> ')" onkeyup= "Dl_sfilter ( This, ' <%=s_divid%> ', <%=s_arrayname%>, ' <%=s_tr_id%> '; ><br>
<%
Call Create_dy_select (s_arrayname,rs,s_alias_field,s_main_field,s_inputname,s_divid,s_tr_id)
%>