Barre de recherche autocomplete

Maxime Rodriguez
Javascript

Bonjour à tous,

J'ai une barre de recherche avec un système d'autocompletion, j'ai bien un retour lorsque je tape quelque chose mais ça ne s'affiche pas. Je le sais en utilisant ma console : dans XHR => aperçu : ["Laurent","Laura"] lorsque je tape "la".

Mes connaissances dans le JS et le jQuery n'étant pas suffisante j'ai tenté de suivre le tuto de ce site pour y parvenir mais je sollicite votre aide afin d'avoir l'affichage des réponses ainsi que l'impossibilité de valider le formulaire en appuyant sur la touche "entrer".

Voici le code actuel :

<input type="text" id="recherche">
<script>
    $('#recherche').autocomplete({
        source : '../recup_nom.php',
        minLength : 2
    });
</script>

Voici ce que j'utilise entre les balises <head> j'ai ceci :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

Mon fichier de récupération : (ci dessous j'ai supprimé ma ligne de connexion :))

<?php

$term = $_GET['term'];

$requete = $pdo->prepare('SELECT * FROM ma_table WHERE title LIKE :term');
$requete->execute(array('term' => '%'.$term.'%'));

$array = array();

while($donnee = $requete->fetch())
{
    array_push($array, $donnee['title']);
}

echo json_encode($array);
?>

D'avance merci :)

2 réponses

Huggy
Réponse acceptée

Bonjour Maxime,
Je pense que le format des données doit être en json sous cette forme :

echo '[{"value":"Laurent"},{"value":"Laura"},{"value":"Laetitia"}]';

on peut aussi rajouter un champ 'id' en plus de 'value'
ne pas oublier l'entête pour le json

header("Content-Type: application/json");
...
Maxime Rodriguez
Auteur

Bonjour Huggy,

Je te remercie pour ta réponse :)
Problème résolu, il s'agissait d'un soucis des versions des fichiers jQuery.
Merci encore pour ta réponse en tout cas elle m'a également été utile :)