CodeIgniter中用JQuery简单实现Ajax建议和自动完成功能
本帖最后由 avinmo 于 2009-8-11 17:09 编辑效果图如下:
http://www.dgpower.net/webSys/upload/Image/20090811073052118.jpg
首先下载需要用到的三个JQ文件,点击{此处下载}
下载后,把这三个JS文件,导入到HTML页面。HTML页面导入JQ文件后。主体body部分插入一个input,如下:
<input id="searchname" name="searchname" type="text" />
这个Ajax的自动完成功能需要由html页面的ajax传递值到controller处理,然后再返回到页面。所以整过过程涉及到html页面的js代码和controller里的查询返回代码。现在我先把HTML页面里的js代码贴上,如下图: http://www.dgpower.net/webSys/upload/Image/20090811082622171.jpg 前面七行代码是导入上面所说到的两个JS文件和一个CSS文件。路径根据自己需要修改。下面的那部份就完成了input字符串传递到Controllers{这里是allotpower.php里的autoGetCompId_Data方法},既然传值到这方法里了,那么当然就要到这个Controller里去写处理操作的代码了。代码如下:
Php代码 http://www.dgpower.net/news/images/icon_copy.gif
[*]function autoGetCompId_Data() [*] { [*] //接受HTML页面以GET方式传递过来的Input文本框的字符,并转换为小写 [*]
$q = strtolower($_GET["q"]); [*] if (!$q) return;//如果为空,则返回 [*][*] //根据自身需要,查询出相应记录,返回到html页面 [*]
$this->db->select('compnumb'); [*]
$this->db->from('Comp_info'); [*]
$query = $this->db->get(); [*]
$datas =$query->result(); [*] //print_r($datas); [*][*] foreach ($datas
as
$item) [*] { [*] //把查询到的记录,转换成小写后,与传过来的值对比,如果相同,则返回记录 [*] if (strpos(strtolower($item->compnumb), $q) !== false) [*] { [*]
echo
"$item->compnumb\n"; [*] } [*] } [*] }
至此,自动完成功能的操作基本上完成了。但此时,你去测试一下,可能会没有得到想要的效果。因为CI的Config.php文件里
$config['enable_query_strings'] 设置默认是False的,我们需要改变一下设置,如下:
$config['enable_query_strings'] = TRUE;
这是因为Ajax里采用的是GET的方式传值,所以需要打开这个Query_string设置。
不明白的大家可以留言。 额,服务端实时db query做ajax auto complete,每次取得全部行迭代,人多会很卡很卡 全部取的话真的很卡,可以延时什么的. 加个limit 数字也行. 2# visvoy
我只是提供一个使用JQ实现自动完成功能的方法。至于要怎么去搜索提取数据,自己看自身实际情况来定啊。 先学习下。。。。。。 学习了,呵呵 看不到图片?急!!!!!
页:
[1]