CodeIgniter中用JQuery简单实现Ajax建议和自动完成功能

avinmo

效果图如下：

首先下载需要用到的三个JQ文件，点击{此处下载}
下载后，把这三个JS文件，导入到HTML页面。HTML页面导入JQ文件后。主体body部分插入一个input，如下:

<input id="searchname" name="searchname" type="text" />
这个Ajax的自动完成功能需要由html页面的ajax传递值到controller处理，然后再返回到页面。所以整过过程涉及到html页面的js代码和controller里的查询返回代码。现在我先把HTML页面里的js代码贴上，如下图: 前面七行代码是导入上面所说到的两个JS文件和一个CSS文件。路径根据自己需要修改。下面的那部份就完成了input字符串传递到Controllers{这里是allotpower.php里的autoGetCompId_Data方法},既然传值到这方法里了，那么当然就要到这个Controller里去写处理操作的代码了。代码如下:
Php代码

• 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设置。
不明白的大家可以留言。

visvoy

额，服务端实时db query做ajax auto complete，每次取得全部行迭代，人多会很卡很卡

jlzan1314

全部取的话真的很卡,可以延时什么的. 加个limit 数字也行.

avinmo

2# visvoy

我只是提供一个使用JQ实现自动完成功能的方法。至于要怎么去搜索提取数据，自己看自身实际情况来定啊。

bouleon

先学习下。。。。。。

zkyy66

学习了，呵呵

wjh863

看不到图片？急！！！！！