.NET + Jquery+ MsSql实现仿百度输入自动补全
2012-03-31 14:06
399 查看
前段时间在帮助PHP小组的同事做几个招聘相关的审批页面,其中涉及一个表单需要用户提交,在职位一栏,考虑是否要手动输入还是从数据库中带出,因为职位有上百个,如果做成下拉,用户找起来也困难,最后想到了一个折中的方案,干脆做成自动提示吧,用户只要输入一个关键字就可以自动提示相关的信息。效果如下
看起来还是不错滴!View Code
关键代码在文中有注释,不在獒述,对于json可以参见之前的笔记/article/5949256.html
在firefox下的效果图
但是在ie8下输中文没有显示相关结果,打了断点测试,中文参数传到后台是乱码。现在还不知道怎么处理。
今天也是这个月的最后一天了,哈哈,就怕自己太懒了,写一点吧!期望和大家交流!
Demo_AutoComplete.rar
看起来还是不错滴!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
相关文章推荐
- 用jquery-ui Autocomplete一步一步实现输入自动补全
- 使用jquery实现仿百度自动补全特效
- 使用FlexBox和Json实现类似ComboBox(类似Google的输入提示和自动)功能-基于JQuery-ASP.NET
- jQuery实现文本框邮箱输入自动补全效果
- 【输入智能提示功能】PHP+jQuery实现自动补全功能
- 使用jquery实现仿百度自动补全特效
- jquery 实现输入邮箱时自动补全下拉提示功能
- javascript 实现类似百度联想输入,自动补全功能
- jQuery实现文本框邮箱输入自动补全效果
- 【输入智能提示功能】PHP+jQuery实现自动补全功能
- jquery 实现输入邮箱时自动补全下拉提示功能
- jquery实现仿百度自动补全功能
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- ASP.NET jQuery 食谱25 (使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能)
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- Jquery实现边输入边查询,仿百度,并可以选择查询的值赋到输入框
- AJAX实现类似百度的搜索提示,自动补全和键盘、鼠标操作
- jquery+ajax实现像百度搜索框中输入文字
- autocomplete实现联想输入,自动补全
- 百度搜狗等搜索引擎智能提示(JSONP跨域实现自动补全搜索建议)