1 pièce(s) jointe(s)
"autocompletion" sur un select
Besoin:
Permettre à l'utilisateur de sélectionner rapidement une option dans un select qui en compte plusieurs (milliers dans mon cas, correspondant à des codes de produit).
Souvent, l'utilisateur connait le code du produit, l'idée est donc de lui permettre de taper le code du produit (un peu comme une autocomplétion), sauf qu'au lieu d'être sur un champ texte, elle se fait sur un select.
Utilisation:
La classe se plug directement sur le select, c'est à dire qu'il ne nécessite pas de modification sur son code html.
A chaque lettre tapée, une expression régulière vérifie et ne garde dans la liste que les otions correspondantes au masque. Les lettres précédentes sont conservées pour augmenter le masque à chaque fois.
La touche <-- permet de supprimer le dernier caractère du masque, ECHAP de réinitialiser le masque.
NB:
Dans mon cas, la saisie devait correspondre aux premières lettres du code du produit, donc l'expression régulière qui utilise le masque doit être changée pour toute autre utilisation.
La première option du select ne correspond pas a une vraie option, mais un indication du genre "choissez". Il faudrait modifier le code pour changer ca si besoin.
Exemple:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <html>
<head>
<script type="text/javascript" src="autocomplete.js"></script>
</head>
<body>
<select id="foo">
<option>Choisissez</option>
<option value="foo">foo</option>
<option value="ffoo">ffoo</option>
<option value="fooo">fooo</option>
<option value="bar">bar</option>
<option value="bbar">bbar</option>
<option value="baar">baar</option>
<option value="foobar">foobar</option>
</select>
<script> new autocomplete(document.getElementById("foo"))</script>
</body>
</html> |
