Posted on 2007-10-19 18:17
Stanley Sun 阅读(2530)
评论(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