自动完成不会给出结果
我有自动完成脚本的问题。脚本在输入时不提供任何名称。 这里是指数：自动完成不会给出结果
<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>
这里是bla.php 连接到数据库是正确的，从数据库数据是正确的。
$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);
在ajax我有控制台日志，哪个返回coorect值。例如，如果我inser输入Ter，然后在console.log我有：内容：[“Terrence Rowell”，“Terry Moony”，“Terry Morco”]，如果我插入特里我只有内容：[“Terry Moony” ，“Terry Morco”]。这是完全正确的数据，但是，脚本没有写入自动填充框。什么时候，我有javascrit数组中的数据，所有的作品，但如果我从PHP脚本插入数组我没有自动填充框。
因为你通过信函，而不是一个字符串返回一个JSON编码值，分割功能工作的信......所以需要给的dataType为JSON。
添加数据类型为你的Ajax请求，例如： dataType: "json",这样
$.ajax({
method: 'POST',
url: 'bla.php',
dataType: "json",
data: {
str: string
}, etc...
我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>
和我的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);
?>
用dataType json ajax返回错误信息：parserror。 –
发生这个'parserror'消息的原因是，当你简单地返回一个字符串或其他值时，它不是真的'Json'，所以解析器在解析时失败 – Nawin
它是数据库ThaliaLibertéz的名字。 –
检查你的PHP版本，并相应地使用片段，
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);
?>
我有两个parseError。 –
控制台是否显示任何错误？请修复您的帖子拼写，以便使用户更容易。 – Script47
我在控制台中没有任何错误。 –
在DOM下载入你的jQuery或者在'DOMContentLoaded' /'document.ready'中包装，看看是否有帮助。 – Script47