項目中有時會用到自動補全查詢，就像Google搜索框、淘寶商品搜索功能，輸入漢字或字母，則以該漢字或字母開頭的相關條目會顯示出來供用戶選擇， autocomplete插件就是完成這樣的功能。
autocomplete官網 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ （可下載jQuery autocomplete插件）。
淘寶商品搜索功能 效果：
下面來使用 autocomplete插件來實現類似效果。
1. 創建 AjaxPage.aspx 頁面，在其中定義 WebMethod 方法來返回 搜索頁面需要的輸入框所有提示條目。 后臺代碼如下：
1 using System.Collections.Generic;
2 using System.IO;
3 using System.Runtime.Serialization.Json;
4 using System.Web.Services;
5
6 public partial class AjaxPage : System.Web.UI.Page
7 {
8 [WebMethod]
9 public static string GetAllHints()
10 {
11 Dictionary<string, string> data = new Dictionary<string, string>();
12 data.Add("蘋果4代iphone正品", "21782");
13 data.Add("蘋果4代 手機套", "238061");
14 data.Add("蘋果4", "838360");
15 data.Add("蘋果皮", "242721");
16 data.Add("蘋果筆記本", "63348");
17 data.Add("蘋果4s", "24030");
18 data.Add("戴爾筆記本", "110105");
19 data.Add("戴爾手機", "18870");
20 data.Add("戴爾鍵盤", "30367");
21
22 DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());
23
24 using (MemoryStream ms = new MemoryStream())
25 {
26 serializer.WriteObject(ms, data);
27 return System.Text.Encoding.UTF8.GetString(ms.ToArray());
28 }
29 }
30 }
注：該方法返回的數據格式為json字符串。
2. 創建搜索頁面 Index.aspx， 前臺代碼如下：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="_Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 <link rel="Stylesheet" href="Styles/jquery.autocomplete.css" />
9 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
10 <script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>
11 <script type="text/javascript">
12 var v = 1;
13 $(document).ready(function () {
14 $.ajax({
15 type: "POST",
16 contentType: "application/json",
17 url: "AjaxPage.aspx/GetAllHints",
18 data: "{}",
19 dataType: "json",
20 success: function (msg) {
21 var datas = eval('(' + msg.d + ')');
22 $("#txtIput").autocomplete(datas, {
23 formatItem: function (row, i, max) {
24 return "<table width='400px'><tr><td align='left'>" + row.Key + "</td><td align='right'><font style='color: #009933; font-family: 黑體; font-style: italic'>約" + row.Value + "個寶貝</font> </td></tr></table>";
25 },
26 formatMatch: function(row, i, max){
27 return row.Key;
28 }
29 });
30 }
31 });
32 });
33 </script>
34 </head>
35 <body>
36 <form id="form1" runat="server">
37 <div>
38 <center>
39 <asp:TextBox ID="txtIput" runat="server" Width="400px"></asp:TextBox>
40 </center>
41 </div>
42 </form>
43 </body>
44 </html>
實現效果如下：
3. autocomplete 參數說明
* minChars (Number)
在觸發autoComplete前用戶至少需要輸入的字符數.Default: 1，如果設為0，在輸入框內雙擊或者刪除輸入框內內容時顯示列表
* width (Number)
指定下拉框的寬度. Default: input元素的寬度
* max (Number)
autoComplete下拉顯示項目的個數.Default: 10
* delay (Number)
擊鍵后激活autoComplete的延遲時間(單位毫秒).Default: 遠程為400 本地10
* autoFill (Boolean)
要不要在用戶選擇時自動將用戶當前鼠標所在的值填入到input框. Default: false
* mustMatch (Booolean)
如果設置為true,autoComplete只會允許匹配的結果出現在輸入框,所有當用戶輸入的是非法字符時將會得不到下拉框.Default: false
* matchContains (Boolean)
決定比較時是否要在字符串內部查看匹配,如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用.Default: false
* selectFirst (Boolean)
如果設置成true,在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選擇,盡管它沒被手工選中(用鍵盤或鼠標).當然如果用戶選中某個項目,那么就用用戶選中的值. Default: true
* cacheLength (Number)
緩存的長度.即對從數據庫中取到的結果集要緩存多少條記錄.設成1為不緩存.Default: 10
* matchSubset (Boolean)
autoComplete可不可以使用對服務器查詢的緩存,如果緩存對foo的查詢結果,那么如果用戶輸入foo就不需要再進行檢索了,直接使用緩存.通常是打開這個選項以減輕服務器的負擔以提高性能.只會在緩存長度大于1時有效.Default: true
* matchCase (Boolean)
比較是否開啟大小寫敏感開關.使用緩存時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的緩存中去找.Default: false
* multiple (Boolean)
是否允許輸入多個值即多次使用autoComplete以輸入多個值. Default: false
* multipleSeparator (String)
如果是多選時,用來分開各個選擇的字符. Default: ","
* scroll (Boolean)
當結果集大于默認高度時是否使用卷軸顯示 Default: true
* scrollHeight (Number)
自動完成提示的卷軸高度用像素大小表示 Default: 180
* formatItem (Function)
為每個要顯示的項目使用高級標簽.即對結果中的每一行都會調用這個函數,返回值將用LI元素包含顯示在下拉列表中. Autocompleter會提供三個參數(row, i, max): 返回的結果數組, 當前處理的行數(即第幾個項目,是從1開始的自然數), 當前結果數組元素的個數即項目的個數. Default: none, 表示不指定自定義的處理函數,這樣下拉列表中的每一行只包含一個值.
* formatResult (Function)
和formatItem類似,但可以將將要輸入到input文本框內的值進行格式化.同樣有三個參數,和formatItem一樣.Default: none,表示要么是只有數據,要么是使用formatItem提供的值.
* formatMatch (Function)
對每一行數據使用此函數格式化需要查詢的數據格式. 返回值是給內部搜索算法使用的. 參數值row
* extraParams (Object)
為后臺(一般是服務端的腳本)提供更多的參數.和通常的作法一樣是使用一個鍵值對對象.如果傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前用戶輸入了foo). Default: {}
* result (handler)
此事件會在用戶選中某一項后觸發，參數為：
event: 事件對象. event.type為result.
data: 選中的數據行.
formatted:formatResult函數返回的值
例如：
$("#singleBirdRemote").result(function(event, data, formatted) {
//如選擇后給其他控件賦值，觸發別的事件等等
});
過頁頭生成Token,進行請求驗證,解決Ajax請求安全問題。目前為止我做的最多的防止ajax請求攻擊的就是添加驗證碼、添加隨機Token,限制同一請求在規定時間內的最大請求數。
下面重點說說添加隨機Token限制：
token是為了防止表單重復提交，token 原理大致為：
1：顯示表單的那個 action 中使用 createToken() 生成一個隨機的 token值，并存放在服務端(session或者cache中)，并且傳遞一份到頁面中
2：表單頁面使用一個隱藏表單域獲取后端傳過來的 token值，該表單頁面提交時會將此 token 值一同提交到后端
3：在表單頁面提交到的 actioin 中使用 validateToken() 將服務端與表單隱藏域中的 token 值進行對比，如果服務端存在 token值并且與表單提交過來的值相等，證明是第一次提交。
4：每次校驗過后服務端的 token 值會立即被清除，所以當用戶重復提交時，后面的提交校驗都再也無法通過。從而實現了防止重復提交的功能，validateToken 是在 synchronized 塊中執行的保障了多線程下的安全性。
token 會優先存入 me.setTokenCache(ITokenCache) 指定的 TokenCache 中，如果未指定則默認使用 session 來存放
但是這種機制是有問題的，比如我是用ajax提交表單，提交完成以后表單頁面并不刷新，然后我修改了部分數據以后再次提交頁面，那么token還是之前的那個token，后臺會以為這個為重復提交不能通過校驗，那么請求就不能完成，數據無法得到正確的處理。我認為合理的機制應該是這樣的：
1：顯示表單的那個 action 中使用 createToken() 生成一個隨機的 token值，并且傳遞一份到頁面中
2：表單頁面使用一個隱藏表單域獲取后端傳過來的 token值，該表單頁面提交時會將此 token 值一同提交到后端
3：將提交過來的token值放入session或者cache中，然后執行controller中的代碼，代碼全部執行完以后，再把存入session或cache中的token值刪除掉；驗證用戶是否為重復提交只需要驗證提交過來的token是否存在于session或cache中，有則為重復提交，無則為正常提交。
4：該邏輯應該可以寫成一個Interceptor,在需要的地方加上，或者直接設為全局攔截器都是可以的，簡單，快捷；