作者：老王
CakePHP本身的
Ajax支持还是相当易懂的，今天先介绍一下如何实现autoComplete效果。
首先
下载最新的script.aculo.us库
文件，解压缩后保存为一个名为ajax的目录，并拷贝到\cake\app\webroot\js目录，然后再
下载一个别人已经写好的AutoComplete组件（不过这个代码里，竟然使用了LIKE '%...%'样式的查询方式，B4一下），保存为/cake/app/controller/components/autocomplete.php，当然它不是必须的，但是通过使用它，能让操作变得更简单，最后我们就像平常一样建立模型，
控制器，视图，当然了还有
数据库，表。
顺便说一句，我这次
MySQL使用的是utf8编码，在CakePHP中设置的地方是config/database.php文件中的'encoding' => 'utf8'。别的编码我没测试过。
现在，初始化工作基本都做好了，下面开始编码：
首先在控制器里加入下面代码，保证CakePHP框架能初始化必要的
组件和视图
助手：
var $components = array('Autocomplete');
var $helpers = array('Ajax', 'Javascript');
然后在视图里加入下面代码：
<?php echo $html->charset('utf-8'); ?>
<?php echo $javascript->link('ajax/lib/prototype'); ?>
<?php echo $javascript->link('ajax/src/scriptaculous'); ?>
<?php echo $ajax->autocomplete('
Model.field'); ?>
Model.field部分修改成你要显示的模型名和
字段名，这样就ok了。
出于美观，我们可能还应该在视图里加入一些必要的CSS代码：
复制内容到剪贴板
代码:
<style type="text/css">
div.auto_complete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
div.auto_complete ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.auto_complete ul li.selected { background-color: #ffb;}
div.auto_complete ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:32px;
cursor:pointer;
}
</style>这样就比较完整了。
后记，这个Autocomplete组件写的实在是不怎么样，这里也是因为演示的方便性才使用的它，实际编码中我想我可能不会用这个组件，如果是这样的话，大概使用流程是这样的，首先，不用再写 var $components = array('Autocomplete'); 了，然后在视图里调用的时候写成
<?php echo $ajax->autocomplete(
'Model.Field', '/controller/action'); ?>
相关地方修改一下就可以了，相应的Model.Field会作为$this->data传递给/controller/action，我们只要在/controller/action里完成适当的查询，并把结果输出成<ul><li>...</li><li>...</li></ul>的形式就可以了($this->layout = 'ajax')。
参考
文档一：
http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
参考文档二：
http://hi.baidu.com/rainchen/blog/item/1cef800ab1c6223fb1351dea.html
