使用mysql ajax codeigniter的自动完成搜索不起作用

Question

控制器：test.php

<?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    class Test extends CI_Controller 
    {
        function __construct() 
        {
            parent :: __construct();
            $this->load->helper(array('form', 'url', 'captcha', 'email'));
            $this->load->model('Fetch_data');
        }
        public function index()
        {
            $this->load->view('index',$data);          
        }
        public function lookup()
        {
            $keyword = $this->input->post('term');  
            $data['response'] = 'false'; 
            $query = $this->Fetch_data->lookup($keyword); 
            if( ! empty($query) )  
            {  
                $data['response'] = 'true';
                $data['message'] = array();  
                foreach( $query as $row )  
                {  
                    $data['message'][] = array(     
                                            'college_name' => $row->college_name 
                                         );
                }  
            }  
            if('IS_AJAX')  
            {  
                echo json_encode($data);
            }  
            else 
            {  
                $this->load->view('index',$data);
            }
        } 
    }

view.php

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />  
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<style>  
    .ui-menu {  
        list-style:none;  
        padding: 2px;  
        margin: 0;  
        display:block;  
    }  
    .ui-menu .ui-menu {  
        margin-top: -3px;  
    }  
    .ui-menu .ui-menu-item {  
        margin:0;  
        padding: 0;  
        zoom: 1;  
        float: left;  
        clear: left;  
        width: 100%;  
        font-size:80%;  
    }  
    .ui-menu .ui-menu-item a {  
        text-decoration:none;  
        display:block;  
        padding:.2em .4em;  
        line-height:1.5;  
        zoom:1;  
    }  
    .ui-menu .ui-menu-item a.ui-state-hover,  
    .ui-menu .ui-menu-item a.ui-state-active {  
        font-weight: normal;  
        margin: -1px;  
    }  
</style> 

<script type="text/javascript">  
    $(this).ready( function() {  
        $("#colleges").autocomplete({  
            minLength: 1,  
            source:   
            function(req, add){  
                $.ajax({  
                    url: "<?php echo base_url(); ?>index.php/test/lookup",  
                    dataType: 'json',  
                    type: 'POST',  
                    data: req,  
                    success:      
                    function(data){  
                        if(data.response =="true"){  
                            add(data.message);  
                            console.log(data);
                        }  
                    },  
                });  
            },  

        });  
    });  
</script>
<input type="text" name="colleges" id="colleges" class="form-control" placeholder="Colleges and Universities" />
<ul>  
    <div class="well" id="result"></div>  
</ul>

型号：

public function lookup($keyword)
    {
        $this->db->select('college_name,state,field')->from('all_colleges'); 
        $this->db->like('college_name',$keyword,'after'); 
        $this->db->or_like('state',$keyword,'after'); 
        $query = $this->db->get();
        $result = $query->result_array();     
        return $result;
    }

在这段代码中，我想创建自动完成建议框。现在，我正在创建具有函数名称查找的测试控制器，该函数名称由脚本在视图页面中调用。在这里，当我在文本框中写一些东西时，它看起来像。

我该如何解决这个问题？

Answer 1

我不太确定。但我注意到构建的数组有问题。在控制器中试试这个，

if( ! empty($query) )  
        {  
            $data['response'] = 'true';
            $data['message'] = array();  
            $data['auto_com'] = array();  
            foreach( $query as $row )  
            {  
                $data['message'][] = array(     
                                        'college_name' => $row->college_name 
                                     );
                $data['auto_com'][] = $row->college_name;   
            }  
        }  
        if('IS_AJAX')  
        {  
            echo json_encode($data['auto_com']);
        }  
        else 
        {  
            $this->load->view('index',$data);
        }

在视图中

<script type="text/javascript">  
$(this).ready( function() {  
    $("#colleges").autocomplete({  
        source:  "<?php echo base_url(); ?>index.php/test/lookup"             
    });  
});  
</script>

Answer 2

Ajax 只需要返回数据，不需要视图。您的 if else 函数是错误的，因为 Ajax 在您的 index 方法中执行。如果你想通过 ajax 传递一个变量，你必须使用它而不是你的数据：

data: {
    term: //some data
},

这使得$this->input->post('term'); 可用。在你的函数中还有一件事

            function(req, add){  
                $.ajax({  
                    url: "<?php echo base_url(); ?>index.php/test/lookup",  
                    dataType: 'json',  
                    type: 'POST',  
                    data: req,  
                    success:      
                    function(data){  
                        if(data.response =="true"){  
                            add(data.message);  
                            console.log(data);
                        }  
                    },  
                });  
            },

你必须调用它来执行一个动作，你只是声明了它但还没有调用它。