Autocomplete in jQuery just ... stopped working?

Question

I had jQuery autocomplete working fine with CodeIngiter when inexplicably it completely stopped. When I visit the controller for autocompletion, I still see the correct array - Javascript just does not return JSON data. What makes this weird is that it works fine and then suddenly stops working.

Here is my Javascript:

$( "#clubs-complete" ).autocomplete({ source: function(request, response) { $.ajax({ url: 'http://www.myurl.com/create/autocomplete', data: 'term='+$("#clubs-complete").val(), dataType: "json", type: "POST", success: function(data){ alert(data); response(data); } }); }, minLength: 1 }); 

Here is my controller:

 public function autocomplete() { // Search term from jQuery $term = $this->input->post('term'); $this->db->select('name','address2'); $this->db->from('clubs'); $this->db->like('name', $term); $suggestions = $this->db->get()->result(); if (count($suggestions) > 0) { $data = array(); foreach ($suggestions as $suggestion) { array_push($data, $suggestion->name); } // Return data echo json_encode($data); } } 

Does anyone know what is going on? A warning in the javascript function returns nothing, and before it was used. When I visit the URL directly, I still see the full array.

Please help, I will tear my hair.

Answer 1

IE has developer tools if you press F12. In Firefox, something similar is called Firebug . In any of them, you can debug javascript in the browser. Set breakpoints inside the fn source, and also in the success function, this may give you some idea.

You may also need an HTTP proxy server, such as Fiddler2 or Charles, which allows you to see outgoing HTTP requests and their corresponding responses. Fiddler2 runs on Windows and works with FF and IE, and almost every other http client. This will allow you to see the messages returned by the AJAX service in a JavaScript browser.

These things should give you an idea of ​​a "broken" problem.