我试图使用jQuery UI的.autocomplete()函数,从MySQL数据库(使用PHP脚本)获取用户名列表,但由于某种原因不工作。控制台不会显示任何错误。
表单中有几个项目,它确实工作正常(表单在editarPerfil.php
文件中,由guardarConfigPerfil.php
文件处理)。
但是由于某种原因,我没有从JS文件中得到任何东西,当userName
字段的内容改变时应该调用。
<form method="POST" action ="guardarConfigPerfil.php">
<div class="form-group ui-widget">
<label for="userName">Username</label>
<input type="userName" class="form-control" value="<?php echo $userName; ?>" name="userName" id="userName" onchange="autocompletarUserNames();">
</div>
这是在页面的页脚:
<!-- jQuery y Bootstrap minificados -->
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/js/formularios.js"></script>
这是我的formularios.js文件:function autocompletarUserNames() {
$( "#userName" ).autocomplete({
source: '/perfil/autocompletarUsername.php'
});
};
这是我的php文件:<?php
session_start();
include $_SERVER['DOCUMENT_ROOT'].'/private/conectar.php';
$conectar = new PDO('mysql:host='.HOST.'; dbname='.DATABASE.'; charset=utf8', USER, PASS);
//get search term
$user = $_GET['userName'];
$buscarUsuario = $conectar->prepare("
SELECT userName
FROM usuarios
WHERE userName
LIKE '%?%'
ORDER BY userName ASC
");
$buscarUsuario->bindParam(1, $user);
$buscarUsuario->execute();
$row = $buscarUsuario->fetchAll(PDO::FETCH_ASSOC);
foreach ($row as $key => $value) {
$data[] = $value['userName'];
}
//return json data
echo json_encode($data);
?>
现在,当我进入表单时,我点击userName字段并键入…什么也不会发生。我做错了什么?
目录树是这样设置的:
public_html/perfil/autocompletarUsername.php <--- the php script
public_html/perfil/editarPefil.php <--- the form
public_html/js/formularios.js <--- the js file
你只需要调用一次:
$( "#userName" ).autocomplete({
source: '/perfil/autocompletarUsername.php'
});
最可能在页面加载时,在$(document).ready();
看起来当您对文本框进行更改时,自动完成会一次又一次地启动。尝试删除onChange并像这样调用自动完成:
$(document).ready(function() {
$( "#userName" ).autocomplete({
source: '/perfil/autocompletarUsername.php'
});
});
一次。当然,这是假设您的文件路径是正确的