'Creating live search with AJAX and CodeIgniter

I'm trying to create a live search feature in CI (which I've never done before). I'm pretty new to web development and am still learning things. I found this little tutorial on how to do it http://www.blog.orionwebtech.net/codeigniter-jquery-ajax-live-search/?codekitCB=415037771.748888

I'm having issues translating the code from that tutorial for my app. I have a table called properties and I want the input value to be compared against the slug column and the name column. And then I want it to return the slug and the name in the live search results where the input value matches either of those columns. It wont match both because the slug contains only numbers and the name contains letters.

This is the code I came up with to try and do this.

The View:

<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>

The 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>

The Controller:

<?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 */

The Model:

<?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);
    }
}

?>

When I tested it I didnt get any results. My test data is valid because there is a matching row in the db. What am I doing wrong?

javascriptphpjqueryajaxcodeigniter


Solution 1:[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();
    }
}

?>

Solution 2:[2]

As per your link you are missing onkeyup=ajaxSearch(); i.e

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mazen Mezlini
Solution 2 Don't Panic

Related Questions