效果图如下：

首先下载需要用到的三个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里去写处理操作的代码了。代码如下:

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设置。

不明白的大家可以留言。