Autocomplete in Codeigniter gives a server error

Question

I get [500] Internal Sever Error with this code trying to implement autocomplete in Codeigniter.

 http://localhost/pier_capitan/index.php/commissary/autocomplete_items?term=a

Below are my codes.

VIEW

    <div class="row">
            <div class="col-md-12" style="margin: 0 auto; margin-top: 10px;">
                <div class="panel panel-primary">
                    <div class="panel-heading"><h3>Add New Inventory</h3></div>
                    <div class="panel-body">
                        <form class="add_new_inventory form-inline" role="form" id="add_new_inventory" method="post">
                            <div class="form-group form-control">
                                <label>Date</label>
                                <input type="date" name="date_added" required>
                            </div>

                            <div class="btn btn-warning pull-right" onclick="add_new_row()">Add more</div>

                            <hr>
                            <div style="font-weight: bold;">Total Php <input type="text" id="total_result" placeholder="0.00" class="form-control" readonly></div>
                            <br>

                            <table class="table table-striped table-bordered table-condensed" id="add_new_inventory">
                                <colgroup>
                                    <col span="1" style="width: 20%;">
                                    <col span="1" style="width: 10%;">
                                    <col span="1" style="width: 10%;">
                                    <col span="1" style="width: 10%;">
                                    <col span="1" style="width: 5%;">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th class="ui-helper-center">Item Name
                                        </th>
                                        <th class="ui-helper-center">Quantity</th>
                                        <th class="ui-helper-center">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td width="50%">
                                            <input type="text" id="item_name" name="item_name[]" placeholder="Item Name" class="form-control input-sm" style="width: 100%;">
                                        </td>
                                        <td width="10%">
                                            <input type="text" name="quantity[]" placeholder="quantity" class="form-control input-sm">
                                        </td>
                                        <td width="10%">
                                            <input type="number" name="amount[]" placeholder="Amount" class="form-control input-sm">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div><!-- panel body -->
                </div><!-- panel -->
            </div><!-- col-md-12 -->
        </div><!-- row -->

    </div><!-- container -->

</body>
<script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/datatables/js/dataTables.bootstrap.js');?>"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<script type="text/javascript">


    $(document).ready(function(){
            var url;
        $('input[name=date_added]').val('<? echo date('Y-m-d')?>');

        $('#item_name').autocomplete({
            source:function(request, response){
                    url="<?php echo site_url('commissary/autocomplete_items');
                    ?>";
                $.ajax({
                    url:url,
                    datatype:"json",
                    data:request,
                    type:"POST",
                    success:function(data){
                    response(data.items);
                  }
                });
            }
        });
});

CONTROLLER

public function autocomplete_items(){
        return $this->items_model->autocomplete_items($this->input->post('term'));

MODEL

public function autocomplete_items($item){
    $item=trim($item);
    $this->db->select('item_name');
    $this->db->from('inv_itms');
    $this->db->like('item_name',$item);
    $this->db->limit('5');
    $query=$this->db->get();

    if($query->num_rows()>0){
        $data['items']=array();

        foreach($query->result() as $row){
            $data['items'][]=array(
                    'label'=>$row->item_name,
                    'value'=>$row->item_name
                );
        }
    }
    echo json_encode($data);
}

On the input "item_name", when I enter a letter I should be getting the result but instead, I get the 500 server error. Can you help me out. Thank you.

Answer 1

You are using ajax post method for sending data from view to controller, and trying to get it via

$this->input->post('term') you are not able to receive get variable with this function.

Mainly there are two reasons for 505 error:

1. There is problem with .htaccess code
2. Your model is sending large amount of data.

Answer 2

Your problem is that the request parameter passed to the autocomplete source is an object with a single property term, so if you type foo into you input, the request object will be {term:'foo'}. You have 2 options

Since you are already sending the full request object to your server, just use it, in your controller

public function autocomplete_items(){
    return $this->items_model->autocomplete_items($this->input->post('term'));
}

Or, in your ajax call, send the keyword using your custom object

$.ajax({
    url:url,
    datatype:"json",
    type: "POST",
    data:{ item_name: request.term },
    success:function(data){
        if(data.items){
            response(data.items)
        }
    }
});

Please note I also added type: "POST" to the ajax, which should use with the first option as well.

Answer 3

Change in Controller

public function autocomplete_items(){
    $data = $this->model->...;
    echo $data;
}