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
│ ._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对象,基本的功能都是在这个对象中完成的。首先我们构建一个简单的示例:
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! |
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方式,不过我在这里就不在演示了。
<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