I'm trying to create a form that uses JQuery autocompletion to get values from a MySQL table. I'm pretty new to Javascript and AJAX, but I got it to work. When I type 1 letter in the input field, I get e drop-down list with the matching values from the table. This works fine with normal characters (a-z, 1-9). However, I also have a table containing the following values:
- 10 ng
- 100 ng
- 1 µg
The last one is giving me problems, because it contains a Greek character. When I type '1', it should return all 3 values in the drop-down menu. Instead it doesn't return anything. When I type '10', it returns the first 2 values, as expected. Same thing if I try to type 'g' and 'ng'...
This is my Javascript-code:
$(function() {
$(".ajax_getid_").each(function () {
(function ($this) {
$this.autocomplete({
response: function(event, ui) {
try {
if (ui.content.length === 0) {
$("#"+event.target.id+"-empty-message").text("No results found");
} else {
$("#"+event.target.id+"-empty-message").empty();
}
} catch(err) {
error = "Error 1: "+err.message;
alert(error);
}
},
source: function(request, response) {
try {
$.ajax({
url: "list_"+$this.attr('id')+".php",
dataType: "json",
data: {
term : request.term
},
success: function(data) {
response(data);
console.log(data);
}
});
} catch(err) {
error = "Error 2: "+err.message;
alert(error);
}
},
minlength: 1
});
})($(this));
});
});
While searching around, I found some things about the encoding of the response from the database. But since normal characters are returned without any problem, I'm not sure if this is the problem. And if it is, I don't have a clue on how to solve it.
Edit:
If I try to visualize the MySQL-table in a simple html table, this works without problems as well...
When I try to print the response to the console (Google Chrome), I get the following error: Uncaught TypeError: Cannot read property 'label' of null.
