Auto complete from database using CodeIgniter (Active Record)

Posted by Ralph David Abernathy on Stack Overflow See other posts from Stack Overflow or by Ralph David Abernathy
Published on 2013-06-27T22:19:39Z Indexed on 2013/06/27 22:21 UTC
Read the original article Hit count: 293

I have a form on my website in which one is able to submit a cat. The form contains inputs such as "Name" and "Gender", but I am just trying to get the auto completion to work with the "Name" field. Here is what my jquery looks like :

$(document).ready(function() {
$( "#tags" ).autocomplete({
source: '/Anish/auto_cat'
});
});

Here is what my model looks like:

  public function auto_cat($search_term) {
    $this->db->like('name', $search_term);
    $response = $this->db->get('anish_cats')->result_array();
    // var_dump($response);die;
    return $response;
  }
}

Here is my controller:

public function auto_cat(){
  $search_term = $this->input->get('term');
  $cats = $this->Anish_m->auto_cat($search_term);
}

And here is my view:

<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
</head>

<h1>Anish's Page</h1>
<form action="/Anish/create" method="POST">
  <div class="ui-widget">
    <label for="tags">Name</label><input id="tags" type="text" name="name">
  </div>
  <div>
    <label>Age</label><input type="text" name="age">
  </div>
  <div>
    <label>Gender</label><input type="text" name="gender">
  </div>
  <div>
    <label>Species</label><input type="text" name="species">
  </div>
  <div>
    <label>Eye Color</label><input type="text" name="eye_color">
  </div>
    <div>
    <label>Color</label><input type="text" name="color">
  </div>
    <div>
    <label>Description</label><input type="text" name="description">
  </div>
    <div>
    <label>marital status</label><input type="text" name="marital_status">
  </div>
  <br>
    <button type="submit" class="btn btn-block btn-primary span1">Add cat</button>
</form>
<br/><br/><br/><br/>
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>  
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
        <th>Species</th>
        <th>Eye Color</th>
        <th>Color</th>
        <th>Description</th>
        <th>Marital Status</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($cats as $cat):?>
        <tr>
          <td>
            <?php echo ($cat['name']);?><br/>
          </td>
          <td>
            <?php echo ($cat['gender']);?><br/>
          </td>
          <td>
            <?php echo ($cat['age']);?><br/>
          </td>
          <td>
            <?php echo ($cat['species']);?><br/>
          </td>
          <td>
            <?php echo ($cat['eye_color']);?><br/>
          </td>
          <td>
            <?php echo ($cat['color']);?><br/>
          </td>
          <td>
            <?php echo ($cat['description']);?><br/>
          </td>
          <td>
            <?php echo ($cat['marital_status']);?><br/>
          </td>
          <td>  
          <form action="/Anish/edit" method="post">
            <input type="hidden" value="<?php echo ($cat['id']);?>" name="Anish_id_edit">
            <button class="btn btn-block btn-info">Edit</button>
          </form>
        </td>
        <td>
          <form action="/Anish/delete" method="post">
            <input type="hidden" value="<?php echo ($cat['id']);?>" name="Anish_id">
            <button class="btn btn-block btn-danger">Delete</button>
          </form>
        </td>
      </tr>
      <?php endforeach;?>
    </tbody>
  </table> 

I am stuck. In my console, I am able to see this output when I type the letter 'a' if I uncomment the var_dump in my model:

array(4) {
  [0]=>
  array(9) {
    ["id"]=>
    string(2) "13"
    ["name"]=>
    string(5) "Anish"
    ["gender"]=>
    string(4) "Male"
    ["age"]=>
    string(2) "20"
    ["species"]=>
    string(3) "Cat"
    ["eye_color"]=>
    string(5) "Brown"
    ["color"]=>
    string(5) "Black"
    ["description"]=>
    string(7) "Awesome"
    ["marital_status"]=>
    string(1) "0"
  }
  [1]=>
  array(9) {
    ["id"]=>
    string(2) "16"
    ["name"]=>
    string(5) "Anish"
    ["gender"]=>
    string(2) "fe"
    ["age"]=>
    string(2) "23"
    ["species"]=>
    string(2) "fe"
    ["eye_color"]=>
    string(2) "fe"
    ["color"]=>
    string(2) "fe"
    ["description"]=>
    string(2) "fe"
    ["marital_status"]=>
    string(1) "1"
  }
  [2]=>
  array(9) {
    ["id"]=>
    string(2) "17"
    ["name"]=>
    string(1) "a"
    ["gender"]=>
    string(1) "a"
    ["age"]=>
    string(1) "4"
    ["species"]=>
    string(1) "a"
    ["eye_color"]=>
    string(1) "a"
    ["color"]=>
    string(1) "a"
    ["description"]=>
    string(1) "a"
    ["marital_status"]=>
    string(1) "0"
  }
  [3]=>
  array(9) {
    ["id"]=>
    string(2) "18"
    ["name"]=>
    string(4) "Matt"
    ["gender"]=>
    string(6) "Female"
    ["age"]=>
    string(2) "80"
    ["species"]=>
    string(6) "ferret"
    ["eye_color"]=>
    string(4) "blue"
    ["color"]=>
    string(4) "pink"
    ["description"]=>
    string(5) "Chill"
    ["marital_status"]=>
    string(1) "0"
  }
}

This is an image of my table:

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about database