I have problem with autocomplete script. Script don't give any names under input. Here is index:
<head>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function getData(){
var userName = document.getElementById("tags");
var string = userName.value;
$.ajax({
method: 'POST',
url: 'bla.php',
data: {
str: string
},
success: function(content) {
console.log("Content: " + content);
var availableTags = content;
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" ).autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
},
error: function(xhr, status) {
console.log("ERROR");
}
});
}
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Names: </label>
<input id="tags" size="50" onKeyDown="getData();">
</div>
</body>
</html>
And here is bla.php Connect to db is correct, data from Db is correct.
$d = new Database();
$d->query("SELECT u.cele_jmeno, u.id FROM uzivatele u WHERE u.cele_jmeno LIKE CONCAT(:str,'%') ORDER BY u.cele_jmeno LIMIT 0,15");
$d->bind(":str", $_POST["str"]);
$vysledky = $d->resultset();
$res = Array();
$num = 0;
foreach($vysledky AS $vysledek){
$res[$num] = $vysledek["cele_jmeno"];
$num++;
}
echo json_encode($res);
In ajax I have console log, which return coorect values. For example If I inser into input Ter, then in console.log i Have: Content: ["Terrence Rowell","Terry Moony","Terry Morco"] and if I insert Terry i have only Content: ["Terry Moony","Terry Morco"]. It's all correct data, but, script nothing write into autocomplete box. When, I have data in array in javascrit, all works, but if I insert array from php script i have no autocomplete box.
Here is screenshot: Box when I write first letter
