jquery插件+.net 仿google的自动提示功能效果

之前有需要这样的功能，是用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();
            }

效果如图所示：