input text avec auto-complétion [Résolu]

[Taelis]

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 ?

[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

[Doksuri]

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

[Taelis]

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?

[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()

[Elwyn]

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

[Taelis]

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 ^^

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>

[stealth35]

a quoi sert le $iref ? ainsi que le $nbref
tu peux direct faire un while sur mysql_result

[Doksuri]

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

[radicaldreamer]

dans la requete il faut que tu mettes

Code sql :

WHERE reference LIKE 'letextdetoninput%'

edit: j'ai indiqué le contraire, suis à l'ouest. Dur le réveil...

[Elwyn]

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

[Taelis]

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 ^^