Auto Complele - Ajax - 效果

CakePHP本身的Ajax支持还是相当易懂的，今天先介绍一下如何实现autoComplete效果。

首先下载http://script.aculo.us/最新的script.aculo.us库文件，解压缩后保存为一个名为ajax的目录，并拷贝到\cake\app\webroot\js\ajax\..目录，然后再下载http://cakeforge.org/snippet/detail.php?type=snippet&id=70一个别人已经写好的AutoComplete组件,（不过这个代码里，竟然使用了LIKE '%...%'样式的查询方式，要修改一下第 90 行），保存为/cake/app/controller/components/autocomplete.php，当然它不是必须的，但是通过使用它，能让操作变得更简单，最后我们就像平常一样建立模型，控制器，视图，当然了还有数据库，表。

顺便说一句，我这次MySQL使用的是utf8编码，在CakePHP中设置的地方是config/database.php文件中的'encoding' => 'utf8'。别的编码我没测试过。

现在，初始化工作基本都做好了，下面开始编码：

首先在控制器里加入下面代码，保证CakePHP框架能初始化必要的组件和视图助手, in Controller：

var $components = array('Autocomplete');
var $helpers = array('Ajax', 'Javascript');

然后在视图里加入下面代码：

[?php ]
echo $html->charset('utf-8');
echo $javascript->link('ajax/lib/prototype');
echo $javascript->link('ajax/src/scriptaculous');
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]
autocomplete('Model.Field', '/controller/action');
[?]

相关地方修改一下就可以了，相应的Model.Field会作为$this->data传递给/controller/action，我们只要在/controller/action里完成适当的查询，并把结果输出成

• ...
• ...

的形式就可以了($this->layout = 'ajax')。

参考文档一：http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
参考文档二：http://hi.baidu.com/rainchen/blog/item/1cef800ab1c6223fb1351dea.html
原文: http://hi.baidu.com/thinkinginlamp/blog/item/01aab2fbfebd5d204f4aea9b.html