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".
Yes you do need header info for your 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