input text avec auto-complétion

Version imprimable

03/05/2011, 11h11
Taelis

input text avec auto-complétion

Bonjour,

J'ai un site avec un catalogue de référence.
Je souhaiterai que l'input recherche me donne une liste de références correspondant à ce qui est saisi dans l'input.

euh... Je sais pas si je suis clair...

En gros, je commence à écrire dans le champs rechercher : "Z14"
et J'obtient une liste (qui apparait automatiquement accroché au champs input)
qui me propose
"Z140"
"Z141"
"Z142"
"Z143"

Du même genre que le champs de recherche google...

Quelqu'un a une solution ?
03/05/2011, 11h34
transgohan

Ce n'est pas une solution envisageable en PHP car c'est une langage serveur.
Il faut te tourner vers du Javascript dont les données de référence seront alimentées par un script PHP. :)

Voilà un tutorial : http://dcabasson.developpez.com/arti...ion-pas-a-pas/
Ou sinon via jQuery UI : http://docs.jquery.com/UI/Autocomplete
03/05/2011, 13h48
Doksuri

merci pour le tuto (moi qui voulait justement me faire une auto-completion) :P

Mes essais pour l'auto-complétion

Bon, j'avance, petit à petit...

Voilà là ou j'en suis :

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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<?php 
	$select_ref="SELECT reference FROM catalogue ORDER BY reference";
	$result_ref = mysql_query($select_ref) or die ('Erreur SQL : '.mysql_error() );
	$nbref=mysql_numrows($Rbanniere);
	$iref=0;
?>
<script>
	$(document).ready(function() {
        $("input#autocomplete").autocomplete({
<?php
	echo 'source: ["';
	while( $iref<$nbref)
	{
	       $ref=mysql_result($select_ref);
               echo '"'.ref.'",';
	       $i++;
	}
	echo '"]';
?>
	});
	});
</script>

Puis je met à la place de mon input

Code:

<input id="autocomplete"/>

Mon problème, pour le moment, c'est que ça mouline mais n'aboutit jamais...

Quelqu'un vois quelque chose qui n'irait pas dans ce code?

03/05/2011, 16h34
transgohan

Tu incrémentes $i et non la bonne variable.

Cependant pour ce que tu fais pourquoi ne pas utiliser une fonction mysql_ faisant avancer automatiquement le pointeur ?
mysql_fetch_array()
mysql_fetch_object()
mysql_fetch_assoc()

Comme ceci, ça fonctionne ?

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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<?php 
$select_ref= "SELECT reference FROM catalogue ORDER BY reference";
$result_ref = mysql_query($select_ref) or die ('Erreur SQL : '.mysql_error() );
?>
 
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
 
<?php
echo 'source: ["';
while($result = mysql_fecth_array($resultref))
{
echo '"'.$resultref['reference'].'", ';
}
echo '"]';
?>
 
});
});
</script>

[EDIT] Oups en même temps transgohan

Bon, j'ai réussi un premier essai avec un truc appelé wick.js

Mais cela ne me convient pas vraiment, parce que l'auto-complétion ne se fait que sur les premiers caractères et non pas au milieu des mots, par exemple...

De plus, il m'affiche la liste collé au bord droit de la fenêtre et je ne trouve pas comment remettre la liste en dessous de l'input...

Je suis revenu donc à la première solution qui fonctionne maintenant ^^

Par contre, faut que je check, les résultats s'affichent sur la page et non pas dans une liste...

[EDIT]
J'avais juste oublié le css :
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

Bref, merci à tous ^^:ccool:

Je remet mon code si ca peut aider certains ^^
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 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <?php $select_ref="SELECT reference FROM catalogue ORDER BY reference"; $result_ref = mysql_query($select_ref) or die ('Erreur SQL : '.mysql_error() ); $nbref=mysql_numrows($result_ref); $iref=0; ?> <script> $(document).ready(function() { $("input#autocomplete").autocomplete({ <?php echo 'source:['; while( $iref<$nbref) { $ref=mysql_result($result_ref,$iref,"reference"); echo '"'.$ref.'",'; $iref++; } echo '""]'; ?> }); }); </script>

03/05/2011, 19h30
stealth35

a quoi sert le $iref ? ainsi que le $nbref
tu peux direct faire un while sur mysql_result
04/05/2011, 00h05
Doksuri

Citation:

Envoyé par Taelis

Mais cela ne me convient pas vraiment, parce que l'auto-complétion ne se fait que sur les premiers caractères et non pas au milieu des mots, par exemple...

c'est le principe de l'auto-completion j'ai envie de dire...
04/05/2011, 09h59
rikemSen

dans la requete il faut que tu mettes

Code:

WHERE reference LIKE 'letextdetoninput%'

edit: j'ai indiqué le contraire, suis à l'ouest. Dur le réveil...
04/05/2011, 10h25
fallais

Bonjour,

je ne pense que tu ne pourras pas afficher les résultats sur la page (comme Google ?), le script jQuery est conçu comme ça.

De plus cette méthode n'est pas viable, quand ta base de données sera très grande, tous les résultats seront chargés sur la page (et pour peu que ton inout soit dans le layout principal, à chaque rechargement de page..)

Peut-être devrais-tu te tourner vers un script AJAX plus complet ;)
05/05/2011, 16h35
Taelis

Dernier point qui ne fonctionne pas comme je veux...
Bon, voilà, j'ai réussi à tout régler comme il faut, sauf le nombre de proposition affichées...

Là, ça m'affiche tous les résultats qui contiennent ce que j'ai déjà écrit...

Ce qui fait que lorsque je tape "1", j'ai environ 10000 résultats qui s'affichent...

J'aimerai pouvoir limiter l'affichage à quelques lignes (10-15)

J'ai essayé de limiter ça dans la requête <-- mauvaise idée

Quelqu'un connaitrait-il assez la librairie pour pouvoir m'aiguiller sur l'option à utiliser?
du genre :

Code:

$("input#autocomplete").setMaximumRowCount(12);

De même si quelqu'un sait comment changer la couleur, police, surlignage de survol... etc ?

[EDIT]

J'ai résolu mon problème en éditant le CSS du jquery-ui
Code:

1 2 3 4 5 6 7 8 .ui-autocomplete { position: absolute; cursor: default; max-height: 100px; overflow-y: auto; overflow-x: hidden; padding-right: 20px; font-size: 10px; }
Je pense qu'on peut également faire ça via une balise <style>

Merci pour toute l'aide apportée ^^