Using Twitter Bootstrap Typeahead Plugin in CodeIgniter

[eluser]ninjayan[/eluser]
Hi everyone! I'm back again. Too many to ask since I'm a newbie. Now I'm making an autosuggest field which utilizes twitter bootstraps typeahead plugin. Can you give a hand? Thanks.

view: register
-----

Code:

[removed]
  $(function() {
   $('#office').typeahead({
    source: function(typeahead, query) {
     $.ajax({
      url: "main/get_offices",
      type: "post",
      data: "search=" + query,
      dataType: "json",
      async: false,
      success: function(data) {
       typeahead.process(data);
      }
     });
    }
   });
  });
[removed]

----------
controller: main
------

Code:

public function get_offices() {
  $this->load->model('offices');
  $this->offices->get();

  $data = $this->offices->get();

  echo json_encode($data);
}

-------
model: offices
--------

Code:

public function get() {
  $office = $this->input->post('search');

  $this->db->select('name');
  $this->db->from('departments');
  $this->db->like('name', $office);
  $query = $this->db->get();

  $office_array = array();
  foreach ($query->result() as $row) {
   $office_array = $row->name;
  }
  $data['office'] = $office_array;

  return $data;
}

Please help me fix my code.

[eluser]PhilTem[/eluser]
Your JSON-response probably looks like

Code:

{"offices" : ["Main office", "Chicago Office", "Philly Office"]}

though I guess it should just look like

Code:

["Main office", "Chicago Office", "Philly Office"]

Thus, you either return $office_array in your model or do a

Code:

echo json_encode($data['office']);

in your controller.
Hopefully this will fix your problem If it won't I need to take a closer look at bootstrap's typeahead plugin

PS: I hope that you checked your returning result is actually correct (i.e. has the data it is supposed to have) and it's just a matter of displaying/formatting.

Try doing an

Code:

success: function(data) {
  alert(data);
}

to ensure your data are correct/available as it's supposed to be.

[eluser]ninjayan[/eluser]
Thanks! I will try and give feedback later.

[eluser]ninjayan[/eluser]
Hi. I just tried your code

Code:

success: function(data) {
  alert(data);
}

and it returns the record from the database. I think the problem is on displaying it..Im so noob.

[eluser]ninjayan[/eluser]
Its ok now. I just changed the

Code:

$office_array = $row->name;

to

Code:

$office_array[] = $row->name;

Here's my updated model

Code:

public function get() {
  $office = $this->input->post('search');

  $this->db->select('name');
  $this->db->from('departments');
  $this->db->like('name', $office);
  $query = $this->db->get();

  $office_array = array();
  foreach ($query->result() as $row) {
   $office_array[] = $row->name;
  }
  $data = $office_array;

  return $data;
}

[eluser]PhilTem[/eluser]
[quote author="ninjayan" date="1349319378"]Its ok now. I just changed the

Code:

$office_array = $row->name;

to

Code:

$office_array[] = $row->name;

[...]
[/quote]

Oh yeah right, you didn't populate the array properly. Didn't even notice that

[eluser]vvvfawkesvvv[/eluser]
Hello, maybe you could help me with a similar issue...

Code:

$(function() {
                $('#busqueda').typeahead
                ({
                        source: function(typeahead, query)
                        {
                                $.ajax({
                                        url: "get_series",
                                        type: "post",
                                        data: "search=" + query,
                                        dataType: "json",
                                        async: false,
                                        success: function(data)
                                        {
                                                typeahead.process(data);
                                        }
                                })
                        ;}
                });
        });

controller:

Code:

public function get_series()
        {
                $series['nombre'] = $this->input->post('busqueda');

                $resultado = $this->seriesModel->get_series($series);

                header('Content-type: application/json');

                echo json_encode($resultado);
        }

model:

Code:

function get_series($data)
        {
                $query = $this->db->get_where('series', array('nombre_original' => $data['nombre']));

                $series = array();
              
                foreach ($query->result() as $item)
                {
                        $series[] = $item->nombre_original;
                }

                $data = $series;

                return $data;
        }

It returns: Uncaught TypeError: Object has no method 'process'

Thanks!

PS: I just did with the solution, I put in here for you. Right now I'm looking into the highlighter bootstrap option.

Code:

$('.typeahead').typeahead({

     source: function (query, process) {      
        return $.get('get_series', { query: query }, function (data) {
            return process(data);
        });

    }

[eluser]vvvfawkesvvv[/eluser]
Is there any way to return multiple values? thank you!