Codeigniter 中的 JQuery 实时搜索

Question

我想使用 codeigniter 和 jquery 和 mysql 进行实时搜索 但是当我输入一些东西时结果没有显示

这是我的型号代码：

<?php
class artikel_model extends CI_Model {
    function __construct()
    {
        // Call the Model constructor
        parent::__construct();
    }

    function cari_artikel($q)
    {
        $this->db->select('judul,contain');
        $this->db->like('judul', $q);
        $this->db->or_like('contain', $q);
        $query = $this->db->get('artikel');
        return $query->result_array();
    }
}
?>

这是我的控制器代码：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {


    public function __construct()
    {
        parent::__construct();
        $this->load->model('artikel_model');
    }

    public function index()
    {
        if(isset($_GET['q']) && $_GET['q']){
            $q = $this->input->get('q');
            $this->data['data']=$this->artikel_model->cari_artikel($q);
        }
        else{
            $this->data['data']=array_fill_keys(array('judul', 'contain'), NULL);
        }
        $this->data['body']='dashboard';
        $this->load->view('welcome_message',$this->data);
    }
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */

这是我的视图代码

<?php $this->load->helper('html');?>
    <div class="row">
        <div class="span12 offset3">
            <form class="form-inline" name="form1" method="get" action="">
                Search : <input type="text" class=span5 name="q" id="q"/>   <label for="mySubmit" class="btn  btn-primary"><i class="icon-search icon-white"></i></label> <input id="mySubmit" type="submit" value="Go" class="hidden" />
            </form>
        </div>
    </div>
<?php echo br(15); ?>

    <div id="result"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
        var allow = true;
        $(document).ready(function(){
            $("#q").keypress(function(e){
                if(e.which == '13'){
                    e.preventDefault();
                    loadData();
                }else if($(this).val().length >= 2){
                    loadData();
                }
            });
        });
        function loadData(){
            if(allow){
                allow = false;
                $("#result").html('loading...');
                $.ajax({
                    url:'http://localhost/helpdesk?q='+escape($("#q").val()),
                    success: function (data){
                        $("#result").html(data);
                        allow = true;
                    }
                });
            }
        }
    </script>
<?php
foreach($data as $row){ ?>
    <h3><?php echo $row['judul']; ?></h3>
<?php } ?>

实时搜索不起作用。 当我输入一些东西时，输出只是“正在加载......” 结果没有显示..

如果我按回车，结果将显示。但这只是通常的搜索方法。不是实时搜索。

Answer 1

创建一个新函数，说“live_search”，它只会返回 ajax 搜索的结果，而不是“index”函数。这个新函数将返回带有 HTML 标记的结果。

    public function live_search(){
    if($this->input->post(null)){
       //put your search code here and just "echo" it out 
    }
    }
    $.ajax({
            url:'http://localhost/domain/controller/live_search',
            type : 'POST',
            data : { 'q' : escape($("#q").val()) },
            success: function (data){
                $("#result").html(data);
                allow = true;
            }
        });

希望对你有帮助。