jQuery 自动完成不显示返回的结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15069764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autocomplete Not Showing Results That Are Returned
提问by anthony
I cannot get the results of a jquery autocomplete to show, although the php code returns json results. The jquery code is as follows:
尽管 php 代码返回 json 结果，但我无法显示 jquery 自动完成的结果。jquery代码如下：
$("#newName").autocomplete({
source: function(request, response) {
$.ajax({
url: root + "/assets/php/autocomplete.php",
dataType: "json",
data: {
term : request.term,
field : "name"
},
success: function(data) {
response(data);
}
});
});
The php code is:
php代码是：
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$row_array['value'] = $row[$field];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
When checking the results in Firebug, I get a response such as:
在 Firebug 中检查结果时，我收到如下响应：
[{"value":"jdoe"}]
[{“值”：“jdoe”}]
However, I never see a list of suggestions showing in the html page. Any suggestions on what the problem is.
但是，我从未在 html 页面中看到建议列表。关于问题所在的任何建议。
Thanks, AB
谢谢，AB
回答by anthony
I fixed the problem by adding to my master css file a z-index style for the autocomplete. Everything now works properly.
我通过向我的主 css 文件添加一个用于自动完成的 z-index 样式来解决这个问题。现在一切正常。
.ui-autocomplete {
z-index: 100;
}
回答by Ramzes
I have the same problem. For me solution is to set z-index to higher value like this
我也有同样的问题。对我来说，解决方案是像这样将 z-index 设置为更高的值
.ui-autocomplete
{
position:absolute;
cursor:default;
z-index:1001 !important
}
Some elements hide autocomplete form. (in my app)
某些元素隐藏自动完成表单。（在我的应用程序中）
回答by Praneeth Nidarshan
Try this, it worked for me
试试这个，它对我有用
.ui-front {
z-index: 1500 !important;
}
回答by Aida
In the PHP code try to change 'value' for 'label':
在 PHP 代码中，尝试更改“标签”的“值”：
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$row_array['label'] = $row[$field];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
I don't know why, but it seems that this is important. I will attached the example that worked for me. In my case I had to do a MySQL connection from jQuery through a PHP file. I wanted to do an autocomplete field where you could write a username and, when you clicked on the username, the related fields (name, surname, email...) were populated. Here is my code:
我不知道为什么，但这似乎很重要。我将附上对我有用的例子。就我而言，我必须通过 PHP 文件从 jQuery 进行 MySQL 连接。我想做一个自动完成字段，您可以在其中输入用户名，当您单击用户名时，相关字段（姓名、姓氏、电子邮件...）将被填充。这是我的代码：
HTML code:
HTML代码：
<html lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--Here there is my jQuery script-->
<script type="text/javascript" src="scripts/myjQuery.js"></script>
<title>EXAMPLE AUTOCOMPLETE</title>
</head>
<body>
<h1>CREATING A NEW CASE</h1>
<form id='newcase' action="#" method="POST" name="newcase">
<label>Add Nickname </label>
<input class="input-250" type="text" id="nickname" name="nickname"><br/>
<label>First Name </label>
<input class="input-250" type="text" id="firstname" name="firstname"><br/>
<label>Surname </label>
<input class="input-250" type="text" id="surn" name="surn"><br/>
<label>Organisation</label>
<input class="input-250"type="text" id="organisation" name="organisation"><br/>
<label>E-Mail Address </label>
<input class="input-250" type="text" id="email" name="email"><br/>
</form>
</body>
</html>
myjQuery.js:
我的jQuery.js：
$(document).ready(function(){
$('#nickname').autocomplete({
//Here I call the PHP file and the method inside this file, separated by '/'.
//You should manage it somehow to make this possible.
//I have managed it whith a PHP file called index.php, that gets whatever it comes
//from the URL after the 'rt' and it separates it by the slash,
//being the first value the name of the file, and the second value the name of the
//method.
source:'index.php?rt=jscallsController/listNicknameUsers',
minLength:1,
select: function(evt, ui)
{
// when a username is selected, populate related fields in this form
document.getElementById('firstname').value = ui.item.firstname;
document.getElementById('surn').value = ui.item.surname;
document.getElementById('organisation').value = ui.item.org;
document.getElementById('email').value = ui.item.mail;
}
});
});
And the PHP file jscallsController.php:
和 PHP 文件 jscallsController.php：
<?php
class jscallsController{
public function listNicknameUsers(){
$hostdb = 'localhost';
$namedb = 'tests';
$userdb = 'username';
$passdb = 'password';
$term = trim(strip_tags($_GET['term']));
$users = 'table_users';
$data = array();
try {
// Connect and create the PDO object
$conn = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
// Sets encoding UTF-8
$conn->exec("SET CHARACTER SET utf8");
//Define and perform the SQL SELECT query
$sql = "SELECT u_name, u_fname, u_surname, u_organisation, u_email FROM $users
WHERE u_name LIKE '$term%'";
$result = $conn->query($sql);
// If the SQL query is succesfully performed ($result not false)
if($result !== false) {
// Number of returned rows
$rows = $result->rowCount();
//If exists, returns 1
if($rows > 0){
foreach($result as $user) {
/*The first position of the array needs to be called 'label',
otherwise it will not show anything in the HTML field
where the autocomplete is done.*/
$data[] = array(
'label' => $user['u_name']." (".$user['u_fname']." ".$user['u_surname'].")" ,
'firstname' =>$user['u_fname'],
'surname' => $user['u_surname'],
'org' => $user['u_organisation'],
'mail' => $user['u_email']
);
}
}
}
//Disconnect
$conn = null;
//We send back the array to the jQuery
echo json_encode($data);
}
catch(PDOException $e) {
echo $e->getMessage();
}
}
}
?>
回答by Ni.
Have you try this?
你试过这个吗？
data: {
term : request.value,
field : "name"
},
Your array key is 'value', not 'term'
你的数组键是'value'，不是'term'
回答by Oliver Cape
Just wanna share what solved my problem.
只是想分享解决我问题的方法。
it's very common but might help others.
这很常见，但可能会帮助其他人。
besides from including jquery-ui.json your project. ALWAYS MAKE SURE THAT YOU ALSO INCLUDEjquery-ui.css
除了包括jquery-ui.js在您的项目中。始终确保您还包括jquery-ui.css
<link href="Stylesheets/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui.js"></script>
