php利用CI框架结合bigautocomplete实现联想输入，自动补全。-CSDN博客

第一步：在CI视图文件夹view编写前端页面文件，在页面中引入引入jquery.bigautocomplete.js和jquery.bigautocomplete.css文件。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现仿搜索引擎文本框自动补全插件</title>
<script src="/Public/js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/Public/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Public/js/jquery-1.9.1.js" type="text/javascript"></script>//jquery相关文件的位置
<script src="/Public/js/jquery.bigautocomplete.js" type="text/javascript"></script>// jquery.bigautocomplete.js 的位置
<link rel="stylesheet" href="/Public/css/jquery.bigautocomplete.css" type="text/css" />// jquery.bigautocomplete.css 的位置
<script type="text/javascript">
$(function(){
    $("#search").bigAutocomplete({
        width:543,
        url:'{<$root>}User/Think/inputResult',
        callback:function(data){
            alert(data.title);
        }
    });
})
/*此为本地测试，没有经过ajax请求数据的本地模拟

$(function(){
   $("#search").bigAutocomplete({
        width:543,
        data:[{title:"中央美术学院"},
        {title:"中国美术学院 "},
        {title:"雅昌艺术网"},
        {title:"雅昌集团"},
        {title:"中国体育"},
        {title:"中国军事"},
        {title:"雅昌"},
        {title:"中国工商银行"},
        {title:"中国好声音第二期"},
        {title:"中国地图"}],
        callback:function(data){
            alert(data.title);
        }
    });
})*/
</script>

</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:720px;margin:30px auto;}
.demo h2{font-size:16px;color:#3366cc;height:30px;}
.demo li{float:left;}
.text{width:529px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;outline:none;margin:0 5px 0 0;}
.button{width:95px;height:32px;padding:0;padding-top:2px\9;border:0;background-position:0 -35px;background-color:#ddd;cursor:pointer}
</style>
<div class="demo">
    <h2>bigautocomplete联想输入测试</h2>
    <form action="" method="post" name="searchform" id="searchform" class="searchinfo">
        <ul>
            <li><input type="text" id="search" value="" class="text" /></li>
            <li><input type="submit" value="搜索" class="button" /></li>
        </ul>
    </form>
</div>
</body>
</html>

第二步：通过CI控制器操纵model与view之间的关系，实现联想功能的实现。代码如下：

class Think extends Controller{
   public function __construct() {
        parent::__construct();
        $this->load->helper('url');//将js css form表单等静态文件的绝对路径传给视图
        $this->config->load('myconfig', TRUE);//加载自定义的配置文件
       $this->load->database ();//加载数据库配置
    }
    public function inputThinking(){
       $this->assign('root',$this->config->item('root','myconfig'));
       $this->display('Search/input.html');
   }
    public function inputResult(){
       if($this->input->post()){
           $post=$this->input->post();
       }
       $keywords=$post['keyword'];
       $this->load->model('ModelSearch/ModelSearch');//加载ModelSearch模型
       $res=$this->ModelSearch->inputthinking($keywords);//入库查询
       foreach ($res as $key => $value) {
           $data[]=array('title'=>$value['title']);
       }
       echo json_encode(array('data' => $data));
   }

}