jquery ui autocomplete with database

Question

I fairly new to JQuery and perhaps trying to achieve something that might be abit harder for a beginner. However I am trying to create an autocomplete that sends the current value to a PHP script and then returns the necessary values.

Here is my Javascript code

$("#login_name").autocomplete({
    source: function(request, response) {
 $.ajax({
     url: "http://www.myhost.com/myscript.php",
     dataType: "jsonp",

     success: function(data) {
  alert(data);
  response($.map(data, function(item) {
      return {
   label: item.user_login_name,
   value: item.user_id
      }
  }))
     }
 })
    },
    minLength: 2
});

And here is the the last half of "myscript.php"

while($row = $Database->fetch(MYSQLI_ASSOC))
{
    foreach($row as $column=>$val) 
    {
        $results[$i][$column] = $val;
    }
    $i++;
}
print json_encode($results);

Which produces the following output

[{"user_id":"2","user_login_name":"Name1"},{"user_id":"3","user_login_name":"Name2"},{"user_id":"4","user_login_name":"Name3"},{"user_id":"5","user_login_name":"Name4"},{"user_id":"6","user_login_name":"Name5"},{"user_id":"7","user_login_name":"Name6"}]

Can anyone tell me where I am going wrong please? Starting to get quite frustrated. The input box just turns "white" and no options are shown. The code does work if I specify an array of values.

UPDATE I have changed the code to and still having no luck.

$("#login_name").autocomplete({
    source: "/ajax/login_name.php",
    dataType: "json",
    minLength: 2,
    cache: false,
    select: function(event, ui) {
        alert(ui);
    }
});

Using FireFox's Web Developer tool, I am getting an error "b is null".

Answer 1

some suggestions:

1. Why dataType= "jsop"? It doesn't appear to be jsonp. I think you want "json".
2. insert a cache : false in the options, as well. This insures the request is always made, and never satisfied from browser-side cache.
3. check if the call is going out, with something like Fiddler or Charles.
4. does your success fn get called? You have a alert() there. Does it get invoked?
5. if you have Firebug or the IE8 developer tools, you can put a breakpoint on the alert() to verify the value of the parameters.
6. Why specify the full hostname in the URL? Last night I had an odd situation with autocomplete where the response was null, the empty string, when I used a different hostname for the page and the Ajax request. When I modified it to use the same hostname, the request succeeded. Actually because of the same origin policy, you should have no hostname at all in the URL for the ajax call.

Answer 2

A JSON strcuture is a flat string, while map expects an array or array like structure. try json decode on the string before using map.

Answer 3

Yes you do need header info for your json

        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
        header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
        header("Cache-Control: no-cache, must-revalidate" ); 
        header("Pragma: no-cache" );
        header("Content-type: text/x-json");

and tvanfosson makes a good point abut the the plug

in anycase I don't think you make the ajax call the plugin does.

if you are infact using jquery-ui autocomple you should read over the documentation get a basic version running. your php is fine aside from the missing header data

Answer 4

Finally found the solution that fits my needs

$("#login_name").autocomplete({
source: function(request, response){
$.post("/ajax/login_name.php", {data:request.term}, function(data){     
    response($.map(data, function(item) {
    return {
        label: item.user_login_name,
        value: item.user_id
    }
    }))
}, "json");
},
minLength: 2,
dataType: "json",
cache: false,
focus: function(event, ui) {
return false;
},
select: function(event, ui) {
this.value = ui.item.label;
/* Do something with user_id */
return false;
}

});