您的位置:首页 > Web前端 > JQuery

.NET + Jquery+ MsSql实现仿百度输入自动补全

2012-03-31 14:06 399 查看
前段时间在帮助PHP小组的同事做几个招聘相关的审批页面,其中涉及一个表单需要用户提交,在职位一栏,考虑是否要手动输入还是从数据库中带出,因为职位有上百个,如果做成下拉,用户找起来也困难,最后想到了一个折中的方案,干脆做成自动提示吧,用户只要输入一个关键字就可以自动提示相关的信息。效果如下

看起来还是不错滴!View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Collections;//注意添加引用
using System.Web.Script.Serialization;//注意添加引用
using System.Configuration;

namespace AutoComplete
{
/// <summary>
/// ServerData 的摘要说明
/// 功能:返回JSON数据给前台调用
/// Author:LuckyHu
/// Data:2012-03-31
/// </summary>
public class ServerData : IHttpHandler
{
//设置几个全局变量
string connStr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlConnection conn = null;
SqlCommand cmd = null;
SqlDataReader sdr = null;

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string keyword = context.Request.QueryString["keyword"];
if (keyword != null)
{
JavaScriptSerializer serializer = new JavaScriptSerializer(); // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串
string jsonString = serializer.Serialize(GetFilteredList(keyword));
context.Response.Write(jsonString); // 返回客户端json格式数据
}
}

public bool IsReusable
{
get
{
return false;
}
}

/// <summary>
/// 根据关键字过滤数据
/// </summary>
/// <param name="keyword">关键字</param>
/// <returns>过滤数据</returns>
private string[] GetFilteredList(string keyword)
{
sdr = GetData(keyword);
List<string> nameList = new List<string>();
if (conn.State == ConnectionState.Closed)
{
conn.Open();
}
try
{
while (sdr.Read())
{
string name = sdr["sname"].ToString();
nameList.Add(name);
}
}
catch (SqlException ex)
{
Console.Write(ex.ToString());
}
finally
{
if (conn.State == ConnectionState.Open)
{
conn.Close();
}
}
return nameList.ToArray();
}

/// <summary>
///  构造测试数据
/// </summary>
/// <returns></returns>
public SqlDataReader GetData(string key)
{
conn = new SqlConnection(connStr);
string sql = "select * from student where SNAME like ('" + key + "%')";
if (conn.State == ConnectionState.Closed)
{
conn.Open();
}
try
{
cmd = new SqlCommand(sql, conn);
sdr = cmd.ExecuteReader();
}
catch (SqlException ex)
{
Console.Write(ex.ToString());
}
return sdr;
}
}
}


关键代码在文中有注释,不在獒述,对于json可以参见之前的笔记/article/5949256.html
在firefox下的效果图



但是在ie8下输中文没有显示相关结果,打了断点测试,中文参数传到后台是乱码。现在还不知道怎么处理。
今天也是这个月的最后一天了,哈哈,就怕自己太懒了,写一点吧!期望和大家交流!

Demo_AutoComplete.rar
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: