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