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

看起来还是不错滴！

使用的是Jquery的一个名叫 jquery.ui.autocomplete.js的插件做的。

后台只要返回 json格式的数据即可。

毕竟自己做.net比较多一些，所以就想把它应用到.NET上来呢?

1 以前也做过类似的功能，用的是AjaxControlToolkit这个组件

方法大致如下，这是前台

然后在webservice写了一个方法，如下

/// 
 /// 模糊匹配——根据基地名称查询 /// 
 /// 关键字 /// 显示条数，在前端设置，默认值为10 /// 
      
       返回一泛型集合
               [WebMethod] public string[] GetCompletionList(string prefixText, int count)         {
                List
      
        list = new List
       
        (); string connstr = ConfigurationManager.AppSettings["ConnectionString"].ToString(); string sql = "select distinct JiDiName,ID from Scan_JiDiTable where JiDiName like '" + prefixText + "%' order by ID";             SqlConnection conn = new SqlConnection(connstr);             conn.Open();             SqlCommand cmd = new SqlCommand(sql, conn);             SqlDataReader dr = cmd.ExecuteReader(); while (dr.Read())             {
                    list.Add(dr["JiDiName"].ToString());             }             dr.Close();             cmd.Dispose();             conn.Close(); return list.ToArray();         }
       
      

恩，方法的调用是在前台写好的。

功能到时实现了，样子有点丑的，嘿嘿

2 使用 jquery.ui.autocomplete实现自动补全效果

首先，你需要一个jquery的ui-autocomplete包，在网上可以下载，jquery的官网就有。（实例中也有）

好了，利用这个插件，省了很多事情的。

直接开始吧!

前台：

脚本：

当然还要引用一个css

这个事随插件自带的。

显然，我们使用的jQuery的Ajax获取后台的数据，所以需要一个数据源，这里我选的是.net 的一般性处理文件(.ashx文件)。

我们新建一个一般性处理文件，命名为ServerData.ashx，如图

这里为了真实展现这个场景，所以构造一个数据库表，从中筛选数据。

CREATE TABLE [dbo].[student]( [SNO] [char](20) NOT NULL, [SNAME] [varchar](16) NOT NULL, [SEX] [varchar](2) NOT NULL, [DEPT] [varchar](16) NOT NULL, [AGE] [smallint] NOT NULL, CONSTRAINT [PK_student] PRIMARY KEY CLUSTERED ( [SNO] ASC )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY] ) ON [PRIMARY] GO

数据表中测试填充数据

ServerData.ashx中代码：

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 {
    /// 
 /// ServerData 的摘要说明 /// 功能:返回JSON数据给前台调用 /// Author:LuckyHu /// Data:2012-03-31 /// 
     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;             }         } /// 
 /// 根据关键字过滤数据 /// 
 /// 关键字 /// 
      
       过滤数据
               private string[] GetFilteredList(string keyword)         {
                sdr = GetData(keyword);             List
      
        nameList = new List
       
        (); 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();         } /// 
        
 ///  构造测试数据 /// 
 /// 
                 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可以参见之前的笔记

在firefox下的效果图

但是在ie8下输中文没有显示相关结果，打了断点测试，中文参数传到后台是乱码。现在还不知道怎么处理。

今天也是这个月的最后一天了，哈哈,就怕自己太懒了，写一点吧!期望和大家交流!