jQuery+AutoComplete與ASP

ENIX.DQ

2013-06-03更新後記：


jQuery 官方已支援AutoComplete ( jQuery  UI)，可參考自：http://jqueryui.com/autocomplete/


本頁面提供之"jQueryAutoCompleteSample.Back.wDatabase.asp" 已不適用jQuery官方提供的AutoComplete

直接在ASP輸出JSON格式即可。


====================================
說明：
　　本頁面將使用jQuery與plug-in AutoComplete並搭配ASP與MSSQL來完成在一input欄位中加入AutoComplete功能
此功能可在使用者於input欄位輸入資料的同時，顯示出建議的文字。

使用環境：
WebSevrer：IIS 7.5
資料庫：MS SQL 2005 Express Edition
測試瀏覽器：IE 8.0


網頁檔案：
1.jQueryAutoCompleteSample2.html - 主要操作頁面
2.jQueryAutoCompleteSample.Back.wDatabase.asp - 從DATABASE獲取資訊的ASP文件

嵌入之文件：
1.CSS檔-
2.AutoComplete JS檔
3.jQuery 1.4.2 min

1.在主要操作頁面嵌入這些檔案

1. <link type="text/css" rel="stylesheet" href="jquery.autocomplete.css"/>
   
2. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
   
3. <script type="text/javascript" src="jquery.autocomplete.min.js"></script>

複製代碼

2.input欄位設定，加入id標籤即可

1. <input name="Text1" type="text" id="t1"  />

複製代碼

3.在頁面加入下面這段代碼

1.    <script type="text/javascript">  
   
2.        $("#t1").autocomplete(' jQueryAutoCompleteSample.Back.wDatabase.asp ');  
   
3.     </script>

複製代碼

注意到，「#t1」其中t1的部分，就是input欄位的id名稱
「.autocomplete()」中包含的【jQueryAutoCompleteSample.Back.wDatabase.asp】 ，就是用來取得建議文字的功能網頁


4.【jQueryAutoCompleteSample.Back.wDatabase.asp】的輸出部分
只需注意輸出格式，由於AutoComplete處理原始資料時，是以斷行符號做為分割的依據
建議程式碼如下：

1. 
   
2. UserList = ""
   
3. 
   
4. If Not(rs.eof and rs.bof) then
   
5. While not(rs.eof)
   
6.   UserList = UserList & rs("UserName") & vbcrlf
   
7. rs.movenext
   
8. Wend
   
9. End if
   
10. 
    
11. Response.write UserList
    

複製代碼

注意到第06行，ASP檔案在處理輸出字串時，每一筆資料的輸出
最後都帶有vbcrlf，這個vbcrlf在vbscript中代表的就是斷行字元
資料都處理完畢後，最後再進行資料的輸出，如此便可完成AutoComplete的所需要求


提醒的部分是，由於有開啟資料庫，請記得把開啟過的連線以.close關閉

如果要使用不連接資料庫的方法，請見參考資料連結[1]


使用範例圖片：


參考資料：
1. [jQuery] Autocomplete - 自動完成文字輸入 - http://jsgears.com/thread-114-1-1.html