Posted on 2007-10-19 18:17
Stanley Sun 閱讀(2535)
評論(2) 編輯 收藏 所屬分類:
Html UI
AutoSuggest是通過AJAX技術實現的一種類似于ComboBox之類的輸入框，當輸入一些提示字符后，AS會自動的把輸入框中的Value通過AJAX發送到Server中，Server自定義的解析發送的數據，然后把返回數據通過XML或JSON方式返回到AS中。AS再根據Server返回的標準格式的數據構建出提示候選框，當用鼠標或鍵盤選中候選項后填充到輸入框中。在寫這篇手冊的時候，AutoSuggest的最新版本是autosuggest_v2.1.3。基本的運行原理如上。
AutoSuggest的主要的物理文件有：bsn.AutoSuggest_2.1.3.js、autosuggest_inquisitor.css。其他的還有一些圖片資源文件，一個測試html與一個test.php的服務器段頁面。結構如下：
│ .DS_Store
│ ._.DS_Store
│ ._bsn.AutoSuggest_2.1.3.html
│ ._test.php
│ bsn.AutoSuggest_2.1.3.html
│ test.php
│
├─css
│ │ .DS_Store
│ │ ._.DS_Store
│ │ autosuggest_inquisitor.css
│ │
│ └─img_inquisitor
│ │ .DS_Store
│ │ ._.DS_Store
│ │ ._as_pointer.gif
│ │ ._hl_corner_bl.gif
│ │ ._hl_corner_br.gif
│ │ ._hl_corner_tl.gif
│ │ ._hl_corner_tr.gif
│ │ ._ul_corner_bl.gif
│ │ ._ul_corner_br.gif
│ │ ._ul_corner_tl.gif
│ │ ._ul_corner_tr.gif
│ │ as_pointer.gif
│ │ hl_corner_bl.gif
│ │ hl_corner_br.gif
│ │ hl_corner_tl.gif
│ │ hl_corner_tr.gif
│ │ ul_corner_bl.gif
│ │ ul_corner_br.gif
│ │ ul_corner_tl.gif
│ │ ul_corner_tr.gif
│ │
│ └─_source
│ .DS_Store
│ ._.DS_Store
│ ._as_pointer.png
│ ._li_corner.png
│ ._ul_corner.png
│ as_pointer.png
│ li_corner.png
│ ul_corner.png
│
└─js
.DS_Store
._.DS_Store
._bsn.AutoSuggest_2.1.3.js
bsn.AutoSuggest_2.1.3.js
bsn.AutoSuggest_2.1.3_comp.js
AutoSuggest是一組JavaScript類庫，其中主要的對象就是bsn.AutoSggest對象，基本的功能都是在這個對象中完成的。首先我們構建一個簡單的示例：
var options_xml = 
{
script:function(input){return"suggestAction!userName.action?signer="+input; }, //(1).帶有傳送數據的請求路徑，其中input是輸入框的value。
varname:"input", //(2).儲存輸入框value的變量名
delay:800, //(3).發送請求的延時時間
cache:false, //(4).是否緩存
noresults:"無符合的記錄！",//(5).當沒有符合的查詢結果時的提示信息
timeout:10000,//(6).候選框停留時間
callback: function(record){ document.getElementById("temp").value = record.value; } //(7).選擇候選項后的回調函數
};
var as_xml = new bsn.AutoSuggest('signer', options_xml); //(8).創建autosuggest對象，并綁定一個輸入框
通過這樣簡單的方式我們就可以完成在頁面中的autosuggest編碼了。其中的參數表可以看下表：
|
Property
|
Type
|
Default
|
Description
|
|
script
|
String / Function
|
-
|
REQUIRED!
Either: A string containing the path to the script that returns the results in XML format. (eg, "myscript.php?")
Or: A function that accepts on attribute, the autosuggest field input as a string, and returns the path to the result script.
|
|
varname
|
String
|
"input"
|
Name of variable passed to script holding current input.
|
|
minchars
|
Integer
|
1
|
Length of input required before AutoSuggest is triggered.
|
|
className
|
String
|
"autosuggest"
|
Value of the class name attribute added to the generated ul.
|
|
delay
|
Integer
|
500
|
Number of milliseconds before an AutoSuggest AJAX request is fired.
|
|
timeout
|
Integer
|
2500
|
Number of milliseconds before an AutoSuggest list closes itself.
|
|
cache
|
Boolean
|
true
|
Whether or not a results list should be cached during typing.
|
|
offsety
|
Integer
|
-5
|
Vertical pixel offset from the text field.
|
|
shownoresults
|
Boolean
|
true
|
Whether to display a message when no results are returned.
|
|
noresults
|
String
|
No results!
|
No results message.
|
|
callback
|
Function
|
|
A function taking one argument: an object
{id:"1", value:"Foobar", info:"Cheshire"}
|
|
json
|
Boolean
|
false
|
Whether or not a results are returned in JSON format. If not, script assumes results are in XML.
|
|
maxentries
|
Integer
|
25
|
The maximum number of entries being returned by the script. (Should correspond to the LIMIT clause in the SQL query.)
|
之后我們只要在我的服務器中解析傳入的signer參數返回，如下格式的xml就可以了。當然也可以用JSON方式，不過我在這里就不在演示了。
<results>
<rs id="1" info="">Foobar</rs>
<rs id="2" info="">Foobarfly</rs>
<rs id="3" info="">Foobarnacle</rs>
</results>
AutoSuggest是比較方便的一種實現類Google Suggest的解決方式，提供的js文件也是比較精巧的，并提供的一個壓縮后的js腳本文件只有8.33 KB大小。如果要查看其代碼可以找到一個沒有壓縮的原始版本的源代碼，其中的代碼也是比較容易閱讀，更改起來也是比較簡單的。我會在以后寫一篇《AutoSuggest代碼解析》。
更多信息可查閱 http://www.brandspankingnew.net/archive/2007/02/ajax_auto_suggest_v2.html