Barre de recherche autocomplete

Par Maxime Rodriguez, il y a 9 ans

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, il y a 9 ans

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, il y a 9 ans

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 :)