jQuery autocomplete: not getting any results. Any ideas?

Question

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
$(document).ready(function(){

    $.ajax({
      type: "POST",
      url: "http://localhost:8888/index.php/welcome/get_client/",
      dataType: "json",
      data: "{}",
      success: function(data) {
          var datafromServer = data.split(",");
          ("#search_client").autocomplete({
              source: datafromServer
          });
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
         alert(textStatus);
      }
    });

});
</script>

Above is my jQuery code. I actually got it from a tutorial, but for the life of me, I can't seem to get it to work and now I'm wondering if it's my json result from PHP.

My PHP looks like this:

function get_client()
{
    $this->db->select('name')->from('clients');
    $query = $this->db->get();

    header('Cache-Control: no-cache, must-revalidate');
    header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
    header('Content-type: application/json');
    echo json_encode($query->result());
}

When I echo it, it looks like this:

[{"name":"Testing"},{"name":"Testing1"},{"name":"test11"},{"name":"test4"},{"name":"Testing21"},{"name":"Just Testing"},{"name":"testy"}]

I do get the following JavaScript error:

TypeError: Result of expression 'data.split' [undefined] is not a function.

Not sure what to do.

Do you set content type application/json in your HTTP response header in your PHP? — padis, Feb 01 '11 at 22:20
Yes, I am. My PHP is pretty simple: $this->db->select('name')->from('clients'); $query = $this->db->get(); header('Cache-Control: no-cache, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); header('Content-type: application/json'); echo json_encode($query->result()); — dallen, Feb 01 '11 at 22:22
Do you get any javascript errors? The `var datafromServer = data.d.split(",")` part looks suspiciousness, it seems that data does not have `d` attribute. — Ski, Feb 01 '11 at 22:24
I do have this JS error: TypeError: Result of expression 'data.split' [undefined] is not a function. — dallen, Feb 01 '11 at 22:27
Also you might find jquery autocomplete (http://docs.jquery.com/UI/Autocomplete) useful. — padis, Feb 01 '11 at 22:30
your data get back to server and jquery parser JSON into variable "data" that is why split does not work. Data is an object. Not String object. — padis, Feb 01 '11 at 22:32

score 1 · Answer 1 · answered Feb 01 '11 at 22:22

1

The data result does not have a property d so data.d.split(","); would be empty. instead try:

$.ajax({
        type: "POST",
        url: "http://localhost:8888/index.php/welcome/get_client/",
        dataType: "json",
        data: "{}",
        success: function(data) {                
            ("#search_client").autocomplete({
                source: data
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
           alert(textStatus);
        }
    });

EDIT: actually there is no need to split the data....

answered Feb 01 '11 at 22:22

Victor

4,635
1
23
30

I get the following error: TypeError: Result of expression '("#search_client").autocomplete' [undefined] is not a function. – dallen Feb 01 '11 at 22:30
@dallen looks like you are missing the autocomplete script declaration – Victor Feb 01 '11 at 22:31
But I'm using the same JS/CSS references used in the example: http://docs.jquery.com/UI/Autocomplete . If I copy/paste that code in my editor and test it, it works fine. So it should be there... – dallen Feb 01 '11 at 22:36
@dallen you are returning a set of paired values, you should try returning just the values in an array: ["test1","tesing",tester"] – Victor Feb 01 '11 at 22:45

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

You may want to check the mime-type of your response too, it should be text/json, or application/json I believe.

Edit I'm leaning towards application/json, see the right JSON content-type

edited May 23 '17 at 11:47

Community

1
1

answered Feb 01 '11 at 22:22

Adam

4,733
4
28
48

score 0 · Accepted Answer · answered Feb 03 '11 at 05:47

0

All this time, the problem was simple: I left the dollar sign off this:

("#search_client").autocomplete({

answered Feb 03 '11 at 05:47

dallen

2,543
7
34
44

jQuery autocomplete: not getting any results. Any ideas?

3 Answers3