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

时间:2017-07-13 06:28:05

标签: php mysql codeigniter autocomplete

controller: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;
    }

在此代码中,我想创建自动填充建议框。现在,我正在创建具有函数名称查找的测试控制器,该查询在脚本中使用视图页面调用。在这里,当我在文本框中写出somthing时,它看起来像。

screenshot of the result

如何解决此问题?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

Ajax只需要返回数据,并且它不需要查看。你的if else函数是错误的,因为Ajax在你的索引方法中执行。如果你想通过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);
                        }  
                    },  
                });  
            },

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