我的自动完成脚本有问题。脚本不会根据输入提供任何名称。 这是索引：
<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 连接到db是正确的，来自Db的数据是正确的。
$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值。例如，如果我输入输入Ter，那么在console.log中我有：内容：[＆＃34; Terrence Rowell＆＃34;，＆＃34; Terry Moony＆＃34;，＆＃34; Terry Morco＆＃34;]如果我插入特里，我只有内容：[＆＃34; Terry Moony＆＃34;，＆＃34; Terry Morco＆＃34;]。它是所有正确的数据，但是，脚本没有写入自动完成框。什么时候，我在javascrit中有数组中的数据，一切正常，但如果我从php脚本插入数组，我没有自动完成框。
答案 0 :(得分：0)
因为你返回一个json编码值，所以split函数按字母而不是一个字符串工作...所以需要将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);
?>
答案 1 :(得分：0)
检查您的php版本，并相应地使用代码段，
function CreateNewSection($secid)
{
switch($secid)
{
case 1:
echo '<nav id="cd-vertical-nav">
<ul>
<li>
<a href="#destinations" data-number="1" class="">
<span class="cd-dot"></span>
<span class="cd-label">Choose Destinations</span>
</a>
</li></ul></nav>';
break;
case 2:
echo '<nav id="cd-vertical-nav"><li><a href="#activities" data-number="2" class=""><span class="cd-dot"></span><span class="cd-label">Activities</span></a></li></li></ul></nav>';
break;
}