Discussion :

[bellouk]

Bonjour,

je voudrais utiliser l'autocomplete en chargeant ma source depuis ma base de données, mais je suis bloqué au choix de la méthode :

je me suis inspiré de la démo "Remote datasource" http://jqueryui.com/demos/autocomplete/#remote.

J'ai le code suivant :

Code javascript :

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

1
2
3
4
5
6
7
8
9
$(function() {
	$("#client").autocomplete({
	source: "nom.php",
	minLength: 2,
		select: function(event, ui) {
		alert(ui);
		}
	});
});

Code html :

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

1
2
<label for="client">Client</label>
<input name="client" id="client" class="ui-autocomplete ui-widget-content ui-corner-all" />

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
$query = "SELECT nom from personne";
$result = mysql_query($query, $db);
 
while($row = mysql_fetch_assoc($result)) {
 
foreach($row as $val)
	$tab[] = $val;
 
}
 
print json_encode($tab);

Lorsque je rentre n'importe quelles lettres (+ de 2) toute la liste est proposée, tandis que quand j'ouvre nom.php avec le serveur, que je copie le json généré après source: l'autocomplete fonctionne correctement..

[sayari.dev]

Tu changes to code côté serveur en

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$query = "SELECT nom from personne WHERE nom LIKE '%" . addslashes($_GET['term']) . "%'";
$result = mysql_query($query, $db);
 
while($row = mysql_fetch_assoc($result)) {
 
foreach($row as $val)
	$tab[] = $val;
 
}
 
print json_encode($tab);

vu que le plugin autocomplete envoie les caractères que tu vient de saisir à la cette page.

[bellouk]

Merci, ça fonctionne en effet.

[yann18]

Je reprends ce post car j'aimerais utiliser également ce widget. Seulement, le champ texte m'affiche la quasi totalité des résultats contenu dans la requête. Il n'y a pas de tri effectué en fonction des lettres tapées dans le champ. Mais je pense que le problème vient plus de la partie PHP que le java-script:

Code :

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

1
2
3
4
5
6
$(function(){
                $("#nBonCom").autocomplete({
                    source: "search.php",
                    minLenght:2
                });
            });

A ce propos, je n'ai pas de besoin d'afficher la sélection dans un autre champs ou une autre zone de la page comme indiqué dans la démo
le code PHP:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$query = 'SELECT designation
    FROM `produits`
    ORDER BY `designation`';
$result = mysql_query($query) or die('Erreur SQL!'.$query.'<br>'.mysql_error());
//
while($row = mysql_fetch_assoc($result)) {
    foreach($row as $val)
        $tab[] = $val;
}
 
print json_encode($tab);

merci,

[sayari.dev]

Tu changes juste ta requête en

Code sql :

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

1
2
3
$query = 'SELECT designation
    FROM `produits`
    WHERE designation LIKE \'%' . addslashes($_GET['term']) . '%\' ORDER BY `designation`';

[yann18]

Mais quel idiot je fais! Cela tombe sous le sens!

vu que le plugin autocomplete envoie les caractères que tu viens de saisir à la page.

Merci bien!

[l.laurent60]

Bonjours a tous,

Je viens de voir que certain ont déjà trouvé la solution au problème ( de remplacer le tableau qui est proposé dans l'API par une requête SQL ) .
Je ne suis pas sur d'avoir tous les éléments, voici le JS qui est proposé dans l'API,

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
 
var options, a;
jQuery(function(){
options = { serviceUrl:'service/autocomplete.ashx' };
a = $('#query').autocomplete(options);
 
// local autosugest options:
var a = $('#query').autocomplete({ 
serviceUrl:'service/autocomplete.ashx',
minChars:1, 
delimiter: /(,|;)\s*/, // regex or character
maxHeight:400,
width:300,
zIndex: 9999,
deferRequestBy: 0, //miliseconds
params: { country:'Yes' }, //aditional parameters
noCache: false, //default is false, set to true to disable caching
 
// local autosugest options:
 lookup: ['Paris/Lille','Lyon','Paris'],
 
  });

Faut il le remplacer par celui la

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$(function() {
	$("#client").autocomplete({
	source: "nom.php",
	minLength: 2,
		select: function(event, ui) {
		alert(ui);
		}
	});
});

Sur le code coté serveur

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$query = "SELECT nom from personne WHERE nom LIKE '%" . addslashes($_GET['term']) . "%'";
$result = mysql_query($query, $db);
 
while($row = mysql_fetch_assoc($result)) {
 
foreach($row as $val)
	$tab[] = $val;
 
}
 
print json_encode($tab);

Je vois que l'on récupère en GET 'term' que doit on mettre dedans coté client
nom.php?tem=...

Merci par avance de vos réponses.