Autocomplete don't give result
Question
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
2 answers
solution1
0 2017-08-14 10:30:30
Because you return a json encode value so split function work as letter by letter instead one string...So need to give dataType as json.
Add data type into your ajax request for ex: dataType: "json", like this
$.ajax({
method: 'POST',
url: 'bla.php',
dataType: "json",
data: {
str: string
}, etc...
My test1.php
<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: 'test.php',
dataType: "json",
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 my test.php
<?php
$vysledky = ["Terry Moony","Terry Morco","window","Libertéz"];
$num = 0;
foreach($vysledky AS $vysledek){
//print_r($vysledek);
$res[$num] = $vysledek;
$num++;
}
echo json_encode($res);
?>
solution2
0 2017-08-14 11:49:53
check your php version, and use snippets accordingly,
if php version>=5.4
<?php
$vysledky = ["Terry Moony","Terry Morco","window","Libertéz"];
$num = 0;
foreach($vysledky AS $vysledek){
$res[$num] = $vysledek;
$num++;
}
echo json_encode($res,JSON_UNESCAPED_UNICODE);
?>
Before PHP 5.4, you can use this snippet:
<?php
$vysledky = ["Terry Moony","Terry Morco","window","Libertéz"];
$num = 0;
foreach($vysledky AS $vysledek){
$res[$num] = $vysledek;
$num++;
}
$holder = json_encode($res);
$holder = preg_replace_callback('/\\\\u([0-9a-f]{4})/i', function($matches) {return mb_convert_encoding(pack('H*', $matches[1]), 'UTF-8', 'UTF-16');}, $holder);
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
ThreeCSG don't give expected result
Autocomplete textbox don't show result inside clicking of textbox
Rails controller and javascript: don't give the desired redirect result
Autocomplete suggestions don't appear
Autocomplete empty if don't select
Don't allow to focus out an autocomplete select
Don't show blank record on autocomplete in Angular
jQuery autocomplete don't select item
Ajax complete don't work with autocomplete
jquery autocomplete doesn't display any result
Related Tags