AutoSuggest 使用手册

 

        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