jquery插件+.net 仿google的自动提示功能效果
2011-02-22 17:03
453 查看
之前有需要这样的功能,是用ajax的自动完成控件实现的,但是个人认为封装的东西并不好用,比如说上次的那个传参数问题,所以有空闲的时候又看了jquery插件,感觉挺不错,但是示例是php的,本人转化为。net的,可以对有需要的朋友作为参考,其实也很简单。
闲话少说,直接看代码
首先引用jquery插件 插件可以去网上搜,
<style type="text/css">@import url("SuggestFramework.css");</style>
<style type="text/css">input { width: 200px; border: 1px solid #CCCCCC; }</style>
<script type="text/javascript" src="SuggestFramework.js"></script>
<script type="text/javascript">
window.onload = initializeSuggestFramework;
</script>
添加控件
<input id="example1" name="example1" type="text" action="Default.aspx" columns="2" capture="1" /><br />
1.action 必须。接受 GET 方式提交的数据,并返回相关 Javascript 数组的动态页。
2.capture 如果返回的结果不止一列(比如本例中的单词和中文意思),将要替换用户输入的那一列(从 1 开始算)。通常这个和数据库字段相对应。可选,默认为 1.
3.columns 下拉显示的列数,比如本例中,按字母查询单词,并将中文意思显示在右侧。可选,默认为 1.
4.delay 查询延时,单位为毫秒。较低的延时会得到更快的反应,但会加重服务器负担。可选,默认为 1000(1秒)。
5.heading 如果设为 true ,第一个数组值将作为不可选择项(标题栏)。当有两列或两列以上数据时非常有用。可选,默认为 false.
数据提交只需要两个数据
1.type 输入框的name
2.q 搜索关键字(默认UTF-8编码)
前台页面已完成。
下面看后台代码
string p=Request["q"];
string p1 = Request["type"];
if (!string.IsNullOrEmpty(p))
{
System.Text.StringBuilder builder = new System.Text.StringBuilder();
builder.Append("new Array(");
string strconj = "server=.;database=huiben;uid=sa;pwd=";
SqlConnection con = new SqlConnection(strconj);
con.Open();
string sql = "select name,je from suggest where name like'" + p + "%'";
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter ad = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
ad.Fill(ds);
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
if (i != ds.Tables[0].Rows.Count - 1)
{
builder.AppendFormat("new Array(/"{0}/", {1}),", ds.Tables[0].Rows[i]["name"].ToString(), ds.Tables[0].Rows[i]["je"].ToString());
}
else
{
builder.AppendFormat("new Array(/"{0}/", {1})", ds.Tables[0].Rows[i]["name"].ToString(), ds.Tables[0].Rows[i]["je"].ToString());
}
}
builder.Append(")");
Response.Clear();
Response.Write(builder.ToString());
Response.End();
}
效果如图所示:
闲话少说,直接看代码
首先引用jquery插件 插件可以去网上搜,
<style type="text/css">@import url("SuggestFramework.css");</style>
<style type="text/css">input { width: 200px; border: 1px solid #CCCCCC; }</style>
<script type="text/javascript" src="SuggestFramework.js"></script>
<script type="text/javascript">
window.onload = initializeSuggestFramework;
</script>
添加控件
<input id="example1" name="example1" type="text" action="Default.aspx" columns="2" capture="1" /><br />
1.action 必须。接受 GET 方式提交的数据,并返回相关 Javascript 数组的动态页。
2.capture 如果返回的结果不止一列(比如本例中的单词和中文意思),将要替换用户输入的那一列(从 1 开始算)。通常这个和数据库字段相对应。可选,默认为 1.
3.columns 下拉显示的列数,比如本例中,按字母查询单词,并将中文意思显示在右侧。可选,默认为 1.
4.delay 查询延时,单位为毫秒。较低的延时会得到更快的反应,但会加重服务器负担。可选,默认为 1000(1秒)。
5.heading 如果设为 true ,第一个数组值将作为不可选择项(标题栏)。当有两列或两列以上数据时非常有用。可选,默认为 false.
数据提交只需要两个数据
1.type 输入框的name
2.q 搜索关键字(默认UTF-8编码)
前台页面已完成。
下面看后台代码
string p=Request["q"];
string p1 = Request["type"];
if (!string.IsNullOrEmpty(p))
{
System.Text.StringBuilder builder = new System.Text.StringBuilder();
builder.Append("new Array(");
string strconj = "server=.;database=huiben;uid=sa;pwd=";
SqlConnection con = new SqlConnection(strconj);
con.Open();
string sql = "select name,je from suggest where name like'" + p + "%'";
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter ad = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
ad.Fill(ds);
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
if (i != ds.Tables[0].Rows.Count - 1)
{
builder.AppendFormat("new Array(/"{0}/", {1}),", ds.Tables[0].Rows[i]["name"].ToString(), ds.Tables[0].Rows[i]["je"].ToString());
}
else
{
builder.AppendFormat("new Array(/"{0}/", {1})", ds.Tables[0].Rows[i]["name"].ToString(), ds.Tables[0].Rows[i]["je"].ToString());
}
}
builder.Append(")");
Response.Clear();
Response.Write(builder.ToString());
Response.End();
}
效果如图所示:
相关文章推荐
- 类似google自动提示功能
- google首页源码,自动提示功能的研究
- Qt 控件 实现 QComboBox输入自动提示功能(仿Google搜索提示)
- 用ASP+jQuery.autocomplete.js实现仿google自动提示功能
- 使用FlexBox和Json实现类似ComboBox(类似Google的输入提示和自动)功能-基于JQuery-ASP.NET
- autocomplete-自动完成-搜索提示-仿google提示效果
- 使用jQuery模拟Google的自动提示效果
- MyEclipse 代码自动提示功能失效 提示No Default Proposals 或 no completions available 的解决方法
- 增加spyder模块代码提示功能和spyder 代码自动补齐设置方式
- eclipse中导入dtd文件实现xml的自动提示功能
- VS2010,VS2012,VS2015等的自动提示不能默认选中的功能解决办法
- solr-利用suggest添加Solr中自动提示功能的简介
- 使用jquery 实现 仿google 的智能提示输入框功能 (改进版本)
- c#TextBox输入框自动提示、自动完成、自动补全功能
- 奇淫技巧____关闭MyEclipse鼠标划过,自动提示功能
- jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
- myeclipse 编辑页面的时候自动提示功能
- 仿百度搜索框自动补全智能提示效果
- myeclipse 代码自动提示功能
- jquery 实现邮箱输入自动提示功能