前段時間在幫助PHP小組的同事做幾個招聘相關的審批頁面，其中涉及一個表單需要用戶提交，在職位一欄，考慮是否要手動輸入還是從數據庫中帶出，因為職位有上百個，如果做成下拉，用戶找起來也困難，最后想到了一個折中的方案，干脆做成自動提示吧，用戶只要輸入一個關鍵字就可以自動提示相關的信息。效果如下
看起來還是不錯滴！
使用的是Jquery的一個名叫 jquery.ui.autocomplete.js的插件做的。
后台只要返回 json格式的數據即可。
畢竟自己做.net比較多一些，所以就想把它應用到.NET上來呢?
1 以前也做過類似的功能，用的是AjaxControlToolkit這個組件
方法大致如下，這是前台
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" DelimiterCharacters=""
Enabled="True" MinimumPrefixLength="1" ServiceMethod="GetCompletionList" ServicePath="http://www.cnblogs.com/../WebService_Scan.asmx"
TargetControlID="TextBox1" UseContextKey="True" CompletionSetCount="10">
</cc1:AutoCompleteExtender>
<asp:ImageButton ID="BtnSearch" runat="server" ImageUrl="http://www.cnblogs.com/../Admin/Accounts/images/button_search.GIF"
OnClick="BtnSearch_Click"></asp:ImageButton>
</div>
然后在webservice寫了一個方法，如下
View Code
/// <summary>
/// 模糊匹配——根據基地名稱查詢
/// </summary>
/// <param name="prefixText">關鍵字</param>
/// <param name="count">顯示條數，在前端設置，默認值為10</param>
/// <returns>返回一泛型集合</returns>
[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{
List<string> list = new List<string>();
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的官網就有。（實例中也有）
好了，利用這個插件，省了很多事情的。
直接開始吧!
前台：
<div id="demo">
<input type="text" id="key" name="key" />
</div>
腳本：
View Code
<script src="ScriptLib/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="ScriptLib/jquery.ui.widget.js" type="text/javascript"></script>
<script src="ScriptLib/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="ScriptLib/jquery.ui.core.js" type="text/javascript"></script>
<script src="ScriptLib/jquery.ui.position.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#key").autocomplete({
minLength: 1, source: function (request, response) {
$.ajax({
type: "POST",
url: "ServerData.ashx?keyword=" + request.term,
contentType: "application/json; charset=utf-8",
dataType: "json", success: function (data) {
response($.map(data, function (item) {
return { value: item };
}));
}, error: function () {
alert("ajax請求失敗");
}
});
}
});
});
</script>
當然還要引用一個css
<link href="Css/jquery.ui.autocomplete.css" rel="stylesheet" type="text/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中代碼：
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可以參見之前的筆記http://www.cnblogs.com/lucky_hu/archive/2012/02/21/2361490.html
在firefox下的效果圖
但是在ie8下輸中文沒有顯示相關結果，打了斷點測試，中文參數傳到后台是亂碼。現在還不知道怎么處理。
今天也是這個月的最后一天了，哈哈,就怕自己太懶了，寫一點吧!期望和大家交流!