使用autocomplete component:
(0.把scriptaculous解压到app/webroot/js,如果要用到AJAX的话,这步是必须的,所以不算入实际步骤中)
1.配置components:var $components = array('Autocomplete');
2.配置helper: var $helpers = array('Html', 'Javascript', 'Ajax');//保证这三个在helper
3.配置layout: <?php echo $javascript->link('prototype')?><?php echo $javascript->link('scriptaculous')?>
4.配置使用页面:在需要用到的一个页面模板中加入: <?php echo $ajax->autocomplete('ModelName/FieldName'); ?>
# That's All 完成
# 效果演示
分析:
前端处理:
通过helper ajax的autocomplete,自动生成一个textField,一个回显容器(下拉菜单的显示层)和一段js:new Ajax.Autocompleter('ModelNameFieldName', 'ModelNameFieldName_autoComplete', '/CurrentController/CurrentControllerAction', {});
就是通过scriptaculous的Autocompleter来完成请求和结果显示操作,详细用法在http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
后端处理:
autocomplete component会拦截所有的通过启用了该组件的controller的请求,若都符合以下几个请求条件就会当作是需要请求操作autocomplete():
1.$_SERVER['HTTP_X_REQUESTED_WITH']=== "XMLHttpRequest" ,
2.是通过POST请求
3.请求参数的格式包含类似data[Model][Field]=xxxx
可能会遇到的问题:
1.autocomplete被激活后会终止之后的操作直接返回查询结果,所以如果有其他需要先激活的components,需要把$components中Autocomplete放到最后,如var $components = array('MyComponent','Autocomplete');
2.如果同一个controller中多处使用了AJAX,就有可能误激活autocomplete,而不能返回期待的请求,如使用普通的ajax请求格式:$ajax -> observeField('data[ModelName][FieldName]', array('url'=>'/CurrentController/someAction'))
3.用来查询的SQL是:($model.'.'.$field => 'LIKE %'.$data[$model][$field].'%'),但按照输入习惯匹配,应该是从左开始完全匹配,所以用类似LIKE 'field%' 作为查询
4.插入cache管理比较难。一个方法是在Autocomplete之前设置一个AutocompleteCache component,但也会拦截所有操作,带来效率问题;另一个万能的方法当然是hack code Autocomplete,但这是最不爽的方法。
5.如果设置了debug,需要在Autocomplete中关闭debug,不然会在所有返回结果中插入cakeSqlLog
6.若开始设置不正确时(如$ajax->autocomplete('noneExists/someth')),调试比较困难(还好有FF的FireBug这个救星)。scriptaculous的Autocompleter不知使用了什么魔法,只有顺利达到Autocomplete component内部,才会回显输出结果。
7.在FF中,使用常用的中文输入(如sogou)不能很好的触发请求(因为会先在文本框中显示首字母)
后记:
1.修改了Autocomplete Component,解决以上相关问题,并可以获取指定的model方法来显示数据
2.修正scriptaculous的Autocompleter按方向键时会有时错误触发的BUG
3.下一步:实现cache
附:
测试环境:
cake_1.2.0.4798alpha
scriptaculous-js-1.7.0
AutoComplete Component v.04
下载scriptaculous库:http://script.aculo.us/downloads,直接解压到app/webroot/js即可,已包含最新稳定版的prototype基库
下载AutocompleteComponent: http://cakeforge.org/snippet/detail.php?type=snippet&id=70, 存为app/controllers/components/autocomplete.php
搜索关键词参考: cakephp autoComplete/Autocompletion livesearch Ajax.Autocompleter
参考阅读:
http://www.justkez.com/cakephp-livesearch/
*http://nio.infor96.com/ajax-in-cakephp/
http://bakery.cakephp.org/articles/view/autocomplete
http://cakebaker.42dh.com/2006/06/06/autocompletion-the-easy-way/
http://cakeforge.org/snippet/detail.php?type=snippet&id=70
http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
*http://cakebaker.wordpress.com/2006/01/18/submit-a-form-with-ajax/
(注:带*表示不能直接访问,需借助代理、搜索快照等手段)