Discussion :

[LelouchXV]

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 :



Merci de votre aide

[Invité]

Bonjour,

: "autocomplétion"

ex. :

• AutoComplétion Code Postal/Ville avec jQuery

[LelouchXV]

Ah merci, je ne savais pas comment ça s'appelé Autocomplétation.

[LelouchXV]

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"



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



Merci de votre aide

[Invité]

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

[LelouchXV]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Invité]

1/

...ç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 :

Sélectionner tout - Visualiser dans une fenêtre à part

	var url = 'autocomplete-ajax.php';

N.B. Leur démo ne fonctionne pas...

[LelouchXV]

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



Encore merci.