Besoin d'aide avec jquery UI autocomplete

sevigo
Javascript

Bonjour,

J'essaye d'ajouter au champ autocomplete avec JQuery UI. mais quelque soit le tuto ça ne fonction pas. et je ne vois pas ou ça coince. quelqu'un aurrait-il le coeur de m'aider?

Voici les fichiers.

Fichier html

<head>
  <meta charset="utf-8" />
  <title>test</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){ 
    $("#cli").autocomplete({
        source: 'autocrecherche.php',
    minLength: 1
        };
    });
});
</script>
 <div id="box">
 <input name="cli" type="text" id="cli" />
 </div>
 </body>
</html>

fichier autocrecherche.php 

<?php
define('DB_SERVER', 'localhost');
define('DB_USER', ' *****');
define('DB_PASSWORD', ' *****');
define('DB_NAME', ' ********');

if (isset($_GET'term'])){
    $return_arr = array();
    try {
        $conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare('SELECT * FROM gt_clients WHERE nom LIKE :term');
        $stmt->execute(array('term' => '%'.$_GET'term'].'%'));

        while($row = $stmt->fetch()) {
            $return_arr] = $row'num_cli']." - ".$row'nom'];
        }
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
    echo json_encode($return_arr);
}
?>

le problème est que quand on tape un caractère il y a un léger temps de chargement qui me laisse donc penser que la connexion avec le fichier de traitement fonction mais pas proposition.

j'ai testé le fichier autocrecherche.php, il me retour bien un résultat.

Merci d'avance pour l'aide que je vais recevoir.

2 réponses

Maenhyr

Bonjour,

peux tu nous envoyer le résultat de search.php ? Est ce que tu es sûr qu'il renvoie bien le json comme le plugin le souhaite ?

Evotique

C'est tout faux.

J'ai modifié le code (il fonctionne) :

<?php
    try {
        $bdd = new PDO('mysql:host=localhost;dbname=search', 'root', '');
    } catch (Exception $e) {
        die('Erreur : '.$e->getMessage());
    }

    $reponse = $bdd->prepare('SELECT * FROM clients WHERE nom LIKE :req');
    $reponse->execute(array('req' => '%'.$_GET'req'].'%')); 
    $listeClients = array();

    while($donnees = $reponse->fetch()) {
        $a = count($listeClients);
        $listeClients$a] = ''.$donnees'prenom'].' '.$donnees'nom'];
    }

    echo json_encode($listeClients);    
?>

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <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>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <script type="text/javascript">
            $(function(){ 
                $("#clients").on('input', function() {
                    $("#clients").autocomplete({source: 'search.php?req='+$("#clients").val()});
                });

            });
        </script>

        <div id="box">
            <input name="clients" type="text" id="clients" style="width: 200px;" />
        </div>
    </body>
</html>

Remarque : Ma table clients contient 3 champs (id, prénom et nom), ici je n'affiche que le nom, à toi de bidouiller pour qu'il affiche prénom, nom et autres renseignements si besoin