使用 AJAX 和 CodeIgniter 创建实时搜索答案

【问题标题】：Creating live search with AJAX and CodeIgniter使用 AJAX 和 CodeIgniter 创建实时搜索
【发布时间】：2014-03-28 01:15:00
【问题描述】：

我正在尝试在 CI 中创建实时搜索功能（我以前从未做过）。我对 Web 开发还很陌生，并且仍在学习。我找到了这个关于如何做的小教程http://www.blog.orionwebtech.net/codeigniter-jquery-ajax-live-search/?codekitCB=415037771.748888

我在为我的应用翻译该教程中的代码时遇到问题。我有一个名为 properties 的表，我希望将输入值与 slug 列和 name 列进行比较。然后我希望它在输入值与这些列中的任何一个匹配的实时搜索结果中返回 slug 和名称。两者都不匹配，因为 slug 只包含数字而名称包含字母。

这是我想出的代码来尝试这样做。

观点：

<div class="something">

    <input name="search_data" id="search_data" class="" value="" data-label="Search for a property, a unit, or an resident..." type="text" />

    <div id="suggestions">

        <div id="suggestionslist">

        </div>

    </div>

</div>

JavaScript：

<script type="text/javascript">
        function ajaxSearch() {
            var input_data = $('#search_data').val();
            if (input_data.length === 0) {
                $('#suggestions').hide();
            } else {

                var post_data = {
                    'search_data': input_data,
                    '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
                };

                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>search/autocomplete",
                    data: post_data,
                    success: function(data) {
                        // return success
                        if (data.length > 0) {
                            $('#suggestions').show();
                            $('#autoSuggestionsList').addClass('auto_list');
                            $('#autoSuggestionsList').html(data);
                        }
                    }
                });

            }
        }
</script>

控制器：

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

class Search extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
    }

    public function autocomplete()
    {
        $search_data = $this->input->post('search_data');
        $query = $this->Search_model->get_autocomplete($search_data);

        foreach ($query->result() as $row):
            echo "<li><a href='" . base_url('association/'.$row->slug) . "'>" . $row->name . "</a></li>";
        endforeach;
    }
}
/* End of file search.php */
/* File location: application/controllers */

模型：

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

class Search_model extends CI_Model
{
    public function __construct()
    {
        $this->load->database();
    }

    public function get_autocomplete($search_data)
    {
        $this->db->select('slug, name');
        $this->db->like('slug', $search_data);
        $this->db->like('name', $search_data);
        return $this->db->get('properties', 10);
    }
}

?>

当我测试它时，我没有得到任何结果。我的测试数据是有效的，因为 db 中有匹配的行。我做错了什么？

【问题讨论】：

您没有在控制器中加载 Search_model。您应该使用 Firebug 或其他东西来观察您的服务器响应。错误可能是别的东西。当您调用您的服务时，请查看您的 Javascript 控制台。如果您没有要显示的结果怎么办？你不处理错误。

标签： javascript php jquery ajax codeigniter

【解决方案1】：

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

class Search_model extends CI_Model
{
    public function __construct()
    {
        parent::__construct();
    }

    public function get_autocomplete($search_data)
    {
        $this->db->select('slug, name');
        $this->db->like('slug', $search_data);
        $this->db->like('name', $search_data);
        $query = $this->db->get('properties', 10);
        return $query->result();
    }
}

?>

【讨论】：

【解决方案2】：

根据您的链接，您缺少 onkeyup=ajaxSearch(); 即

<input name="search_data" id="search_data" class="" value="" 
    data-label="Search for a property, a unit, or an resident..." 
    type="text" onkeyup="ajaxSearch();" />

【讨论】：