您的位置：首页 > 运维架构

textbox+dropdownlist实现联想功能。类似百度，谷歌查询。。

2012-01-12 11:43 861 查看

首先，在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。
}

如图所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航