Système suggestion avec autocomplete jquery
Bonjour à tous, je suis en train de créer un système de recherche automatique des données avec autocomplete jquery, et boum je suis bloqué. Le truc ce que le code ne me renvoit pas le résultat attendu et ne me renvoit plus d'erreur. J'ai besoin d'aide s'il vous plaît.
voici les lignes de code que j'ai écrit en HTML et js:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
</head>
<body>
<form>
<div class="form-group">
<label for="" class="form-group">Tags: </label>
<input type="text" id="tags" class="form-control">
</div>
</form>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#tags" ).autocomplete({
source: function(request, result){
$.ajax({
type: "POST",
url: "search_utilisateur.php",
dataType: "json",
data:{
request: request,
},
success: function (data) {
result(data);
}
});
}
});
});
</script>
</body>
</html>la partie PHP search_utilisateur.php
<?php
require_once('../model/Model_Utilisateur.php');
$U = new Model_Utilisateur();
if(isset($_GET['request']))
{
$query = htmlentities($_GET['request']);
$rows = $U->get_User_ByName($query);
$data = array();
if(!empty($rows))
{
header("Content-Type: application/json");
foreach($rows as $row)
{
$data[] = array(
"value" => $row->uti_nom ." ". $row->uti_postnom ." ". $row->uti_prenom
);
}
echo json_encode($data);
}
else
{
$data[] = "Aucune information trouvée";
echo json_encode($data);
}
}
?>
2 réponses
Bonjour,
je ne sais pas si ca resoud ton probleme. Mais je vois déjà quelques incohérences.
Dans le code JavaScript, la requête Ajax est envoyée en POST alors que dans le fichier PHP, la méthode vérifiée est GET. il faudrait s'accorder sur une même méthode.
<script>
$(document).ready(function () {
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: "search_utilisateur.php",
dataType: "json",
data: {
request: request.term
},
success: function (data) {
response(data);
},
error: function () {
response([]);
}
});
}
});
});
</script>et le php:
if (isset($_POST['request'])) {
$query = htmlentities($_POST['request']);
$rows = $U->get_User_ByName($query);
$data = array();
if (!empty($rows)) {
foreach ($rows as $row) {
$data[] = array(
"label" => $row->uti_nom . " " . $row->uti_postnom . " " . $row->uti_prenom
);
}
}
header("Content-Type: application/json");
echo json_encode($data);
exit;
}
Merci pour ton intervention Lazare. Je viens de copier ce que tu m'as proposé, mais le problème le même. Et je ne sais pas comment trouver la solution puisque le code ne renvoit toujours malgrè cette ligne d'erreur que vous venez d'ajouter en js