Problème input mot clé BDD

Version imprimable

02/08/2016, 01h27
LelouchXV

1 pièce(s) jointe(s)

Problème input mot clé BDD

Bonjour à tous, alors voici mon problème, j'explique mon contexte. En gros, j'ai une base de donnée de ce genre (en réduit)

#id nom calorie
1 Pomme 80
2 Riz 284
3 Riz Thai 271
.. ... ...

Je peux monter à plus de 100 itérations. Il n'y a qu'une seul chose que je n'ai jamais fait et dont je ne trouve pas la solution sur Google. C'est d'avoir un champ de type input (ou autre) et lorsque dedans on
commence à taper un début de mot, une liste me propose tous les noms dans la BDD correspondant à un début similaire
exemple :

Si je commence à taper : "Ri"

Je veux que ça me propose en liste : Riz / Riz Thai

Sur le net je ne trouve que des tutos / aides sur comment faire un moteur de recherche sur site et ce n'est pas ce que je veux faire.

Voici une image plus explicite :

Pièce jointe 216972

Merci de votre aide
02/08/2016, 08h02
Invité
Bonjour,

:recherch: :google: : "autocomplétion"

ex. :
- AutoComplétion Code Postal/Ville avec jQuery
02/08/2016, 11h17
LelouchXV

Ah merci, je ne savais pas comment ça s'appelé Autocomplétation.
02/08/2016, 12h30
LelouchXV

2 pièce(s) jointe(s)

Désolé je reviens à la charge, il y a un truc qui ne veut pas se faire malgré que ça me trouve bien ce que je lui demande.

Tout d'abord j'ai suivi ce tuto qui me parait assez simple : http://chez-syl.fr/2011/12/autocompletion-jquery-mysql/

Donc quand je tape riz il trouve bien d'après la console "Riz et Riz Thai"

Pièce jointe 217007

Voilà ça me le propose pas sous format liste, je vois pas trop pourquoi au niveau du css j'ai mis exactement ce que le tuto proposait.

Et voici le code de ma page en question

Pièce jointe 217009

Merci de votre aide
02/08/2016, 12h52
Invité

Peux-tu copier-coller le code directement dans le contenu (pas sous forme d'image) ?
Merci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div class="form-style-6">
	<h1>Calculer</h1>
	<form action="traitement/ajouterAliment.php" method="post">
		<div>
			<input type="text" name="nom" id="langages" />
		</div>
 
			<input type="submit">
	</form>
</div>
 
<button id="test">Test</button>
 
<?php
    if(isset($_GET['query'])) {
 
        // Mot tapé par l'utilisateur
        $q = htmlentities($_GET['query']);
 
        // Connexion à la base de données
        require 'connexion.php';
 
        // Requête SQL
        $requete = "SELECT * FROM aliment WHERE nom LIKE '". $q ."%' LIMIT 0, 10";
 
        // Exécution de la requête SQL
        $resultat = $pdo->query($requete) or die(print_r($pdo->errorInfo()));
 
        // On parcourt les résultats de la requête SQL
        while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
            // On ajoute les données dans un tableau
            $suggestions['suggestions'][] = $donnees['nom'];
        }
 
        // On renvoie le données au format JSON pour le plugin
        echo json_encode($suggestions);
    }
?>
 
<script type="text/javascript">
$(document).ready(function() {
	var url = window.location.href;
    $('#langages').autocomplete({
        serviceUrl: url,
        dataType: 'json'
    });
 
});
</script>

02/08/2016, 13h24
Invité

1/

Citation:

...ça me le propose pas sous format liste...

C'est-à-dire ?

2/ Je ne vois pas de CSS dans ton code

3/ la partie PHP est censée être dans un fichier externe (à part).
ex. : autocomplete-ajax.php

A mettre comme URL dans le javaScript :

Code:

var url = 'autocomplete-ajax.php';

N.B. Leur démo ne fonctionne pas...
02/08/2016, 13h38
LelouchXV

1 pièce(s) jointe(s)

Ah j'avais pas du tout compris qu'il fallait mettre le php dans un fichier externe.

J'ai donc créer comme tu l'as précisé un fichier php où j'ai mis mon code. Puis j'ai changé l'url du script par le nom du nouveau fichier php et ça marche enfin (Mon css était dans mon fichier style qui est relié à toutes mes pages automatiquement, je ne l'ai pas précisé).

Et maintenant j'ai ça :D

Pièce jointe 217012

Encore merci.