Script.aculo.us开发系列(六):AutoComplete控件

核心提示：Effects之后必然会提到位于controls.js下的两个控件:AutoComplete和InPlaceEditor,这两个控件在Ajax时代是很受大家的欢迎的,在这篇文章中会介绍AutoComplete控件的使用.声明方式 newAjax.AutoComplete("TextBoxId",&q

Effects之后必然会提到位于controls.js下的两个控件:AutoComplete和InPlaceEditor,这两个控件在Ajax时代是很受大家的欢迎的,在这篇文章中会介绍AutoComplete控件的使用.

声明方式

newAjax.AutoComplete("TextBoxId","ChoicesId","RequestUrl",options)

options参数

paramName:传递参数的名称,默认的会传递文本框的name,如果设置该属性为key则请求的页面参数格式为key=value

tokens: 数组或者字符串,字数清零标志.默认为[],若minChars设置为2,tokens设置为[' '],这样在你键入"ab cd"键入"ab"之后会请求服务器,而且会定时监听,这个时间就是frequency属性值,但是键入" " 之后会停止请求服务器,因为它会认为你现在没有键入字符,键入"cd"后继续请求服务器并监听.

frequency:监听周期,单位为秒,默认为0.4s

minChars:请求服务器最少字符,默认为1

indicator:页面元素的Id, 正在请求服务器,在请求服务器前显示,请求完隐藏.

请求页面以及显示

建议请求的页面返回的html代码为,

<ul>
　　　<li>......</li>
　　　<li>......</li>
　　　.....
</ul>

AutoComplete将请求回来的responseText直接赋值给$(choicesId).innerHTML,这样做无非是用于css控制弹出的提示的样式,并且约定鼠标滑上的元素的class="selected"

相关API

目前只有发现这么一个函数afterUpdateElement,它在你点击提示的选项的时候激发,并接受两个参数,一个是element,指向文本框,第二个参数为selectedElement,指向选择的提示