摘自script.aculo.us首页:
script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.
What’s inside? animation framework, drag and drop, Ajax controls DOM utilities, and unit testing.
It’s an add-on to the fantastic Prototype framework.
用script.aculo.us有一段时间了,它实现的效果很美观实用,用起来又非常简单,非常舒服。最初的时候我为一个drag drop的任务头疼,后来发现了它,一句代码搞定,真是太爽了。
如果让你现在做一个像Gmail写邮件时自动补全地址的功能,一定会觉得无从下手。是啊,动态创建提示列表,方向键处理,回车,Tab,还不知道在各种浏览器中调试多少次才可以,好麻烦!
别急,有script.aculo.us,这个工作简单了很多。我们用Autocompleter.Local来实现这个效果。先给个效果看看:
我不想为它专门改一下blog模板加个CSS,所以候选项的样式不是很好,分不清哪个被选中了。你可以在上面输入字幕”b”,然后用鼠标点击一个选项。实际使用的时候一定是需要样式的,这样方便用上下方向键选择(现在也可以按上下键然后回车,只是没有表现)。javascipt我也是引用的script.aculo.us的,如果是自己用,可以下载一份到自己的服务器上。
代码我就不再写一遍了,你可以自己查看本页面的源代码。关键就是一句代码:
new Autocompleter.Local(”autocompleter”, “popup-options”, [“aaa”, “abc”, “bbb”, “bbc”, “bcd”, “cdd”],
{frequency: 0.1, tokens: “,”, afterUpdateElement: function(element) {element.value+=”, “;}}
);
第一个参数是那个input的id,第二个参数是显示後选项的元素的id,第三个参数是候选项数组。第四个参数是选项。tokens指定分隔符,我这里指定了逗号,那么它就会对最后一个逗号后面的内容进行补全操作。afterUpdateElement我定义了一个函数,在输入框中加上一个”, “,这样就可以输入多个项了。
和Gmail的差距?你可以把input换成textarea,加上CSS试一下。我觉得不比Gmail差。
除了可以根据参数中的数组进行补全,script.aculo.us还提供了更多的功能,如通过Ajax请求从服务器取得补全列表。
script.aculo.us的文档其实还不是特别完善。如果你有这样的需求,建议你阅读这几个页面:
其中Ajax.Autocompleter的介绍最为详尽,其中的许多选项是Autocompleter.Local也接受的。有必要的时候可以看script.aculo.us的源代码,它是最权威的文档。