textbox+dropdownlist实现联想功能。类似百度,谷歌查询。。
首先,在HTML 中 增加个这个。因为这个功能要用Ajax实现
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
然后加入textbox 和一些AutoCompleteExtender 。TargetControlID要和TextBox的ID名字是一样的。
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="tex_dwmc" runat="server" Visible="false"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="tex_dwmc"
ServiceMethod="GetCompletionList"
CompletionSetCount="10"
MinimumPrefixLength="1"
CompletionInterval="100" EnableCaching="true" UseContextKey="True">
</cc1:AutoCompleteExtender>
</div>
在后台中加入。
#region 下拉列表
[System.Web.Services.WebMethodAttribute(),
System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count,
string contextKey)
{
string[] dw = { "出租", "闲置", "借出" };
List<string> findCity = new List<string>(count);
int j = 0; int k = 0;
while (k < dw.Length && j < count)
{
string pre = dw[k].Substring(0, prefixText.Length).ToLower();
if (pre.Equals(prefixText.ToLower()))
{
findCity.Add(dw[k].ToString());
j++;
}
k++;
}
return findCity.ToArray();
}
#endregion
string[] dw = { "出租", "闲置", "借出" }; 中为你要联动出来的东西。
下面的为从数据库中选择出来数据 然后再进行联想功能。
#region 下拉列表
[System.Web.Services.WebMethodAttribute(),
System.Web.Script.Services.ScriptMethodAttribute()]
//private OracleConnection conn;
public static string[] GetCompletionList(string prefixText, int count,
string contextKey)
{
string sql = "select distinct zcsyzk from fw_jcxxb";
DataTable dtt = OracleHelper.ExecuteDataset(new OracleConnection(ConfigManager.ConnectionString), CommandType.Text, sql).Tables[0];
List<string> findCity = new List<string>(count);
int j = 0; int k = 0;
while (k < dtt.Rows.Count && j < count)
{
for (k = 0; k < dtt.Rows.Count; k++ )
{
string pre = dtt.Rows[k][0].ToString().Substring(0, prefixText.Length).ToLower();
if (pre.Equals(prefixText.ToLower()))
{
findCity.Add(dtt.Rows[k][0].ToString());
j++;
}
}
}
return findCity.ToArray();
}
#endregion
如果页面要是固定的话,也就是说没有滚动条类似的,可以用textbox+div 来实现类似dropdownlist中输入并实现联想功能,用的是绝对位置定位。
HTML中.......
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>加上这个 这个是AJAX引用。。
function dingwei()
{
var dd = document.getElementById("ddl_dwmc");
var t=dd.offsetTop;
var l=dd.offsetLeft;
while(dd=dd.offsetParent)
{ t+=dd.offsetTop;
l+=dd.offsetLeft;
}
var x = document.getElementById("tex_dwmc");
var y = document.getElementById("DivShims");
x.style.position = "absolute";
y.style.position = "absolute";
x.style.top = t ;
y.style.top = t ;
x.style.left = l;
y.style.left = l;
}
<%--在boday 中onload="dingwei()" 调用JS--%>
<body onload="dingwei()">
增加textbox和dropdownlist 放了个Iframe是为了定位,让这个textbox显示在dropdownlist上面可以实现能输入的功能。
<asp:DropDownList ID="ddl_dwmc" runat="server" AutoPostBack="true"
Width="170px" onselectedindexchanged="ddl_dwmc_SelectedIndexChanged1" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>杏十联合站</asp:ListItem>
<asp:ListItem>杏八联合站</asp:ListItem>
</asp:DropDownList>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<iframe id="DivShims" scrolling="no" frameborder="0" style="position: absolute;" height="23" width="150"></iframe>
<asp:TextBox ID="tex_dwmc" runat="server" style="position:absolute;"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="tex_dwmc"
ServiceMethod="GetCompletionList" CompletionSetCount="10" MinimumPrefixLength="1"
CompletionInterval="100" EnableCaching="true" UseContextKey="True">
</cc1:AutoCompleteExtender>
</div>
后台中....
#region 下拉列表
[System.Web.Services.WebMethodAttribute(),
System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count,
string contextKey)
{
string[] dw = { "杏十联合站", "杏八联合站" };
List<string> findCity = new List<string>(count);
int j = 0; int k = 0;
while (k < dw.Length && j < count)
{
string pre = dw[k].Substring(0, prefixText.Length).ToLower();
if (pre.Equals(prefixText.ToLower()))
{
findCity.Add(dw[k].ToString());
j++;
}
k++;
}
return findCity.ToArray();
}
#endregion
protected void ddl_dwmc_SelectedIndexChanged1(object sender, EventArgs e)
{
tex_dwmc.Text = ddl_dwmc.SelectedValue;//把dropdownlist的值赋值给textbox。
}
如图所示: