AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2008 11 20 01:19:52
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

AIDE AU CHOIX DANS LES LONGS SELECT (PAYS PAR EXEMPLE)


Information sur la source

Catégorie :Formulaire Classé sous : long, select, tooltip, div Niveau : Initié Date de création : 11/10/2005 Date de mise à jour : 18/10/2005 01:59:16 Vu / téléchargé: 5 428 / 926
Auteur : zilx Site perso
Ecrire un message privé
Note :
8,75 / 10 - par 4 personnes
8,75 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (11)
Ajouter un commentaire et/ou une note

Description

Ce code vous permet d'améliorer l'expérience utilisateur en l'aidant lors d'un choix d'une option dans des tags select.
Lorsque l'utilisateurs arrive sur le select, il peut commencer à saisir les premières lettres de l'option, un div apparait affichant sa saisie en cours, et le script séléctionne automatiquement la première option correspondante et ainsi de suite au fur et à mesure de la saisie.
le div disparait au bout de 3 secondes.

Ce script utilise la librairie prototype.js que vous pouvez trouver ici : http://prototype.conio.net/
si vous ne l'avez pas déjà.

Ce script est compatible IE 6+ et FF 1.x
 

Conclusion

La touche tab, pour passer au champ de formulaire suivant, est du coup désactivée sur les selects. (à corriger)

 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

14 octobre 2005 01:54:14 :
- Correction du bug sous IE - Ajout de commentaires
18 octobre 2005 01:59:16 :
Ajout de deux options de paramétrage : - boxShow: true|false -> permet de montrer ou non le div qui affiche la saisie en cours (true par défaut) - boxHideDelay: nombre_de_secondes -> pour modifier le délais de masquage du div qui affiche la saisie en cours (3 par défaut) Ajout du fichier prototype.js dans le .zip

Commentaires et avis

signaler à un administrateur
Commentaire de antony44 le 12/10/2005 08:57:32

J'ai essayé sur IE6 SP2 mais le comportement du tag est le même que celui par défaut : si je tape 'F'+'A'+'N' la sélection est Faeore Islands puis Afghanistant puis Namibia.

signaler à un administrateur
Commentaire de antony44 le 12/10/2005 09:03:41

Désolé mais je n'avais pas vu qu'il manquait le fichier prototype.js.
J'ai téléchargé le fichier depuis http://prototype.conio.net/ et çà marche correctement.
Ce script manque un peu de documentation et de finition (notamment masquage du div de recherche).
Mais en tout cas bravo.

signaler à un administrateur
Commentaire de zilx le 12/10/2005 11:34:33

Merci beaucoup pour le commentaire, je vais essayer de mieux documenter le code et d'affiner la prog (je me suis rendu compte qu'il y a une erreur sous IE lors de la saisie, ça n'empèche pas le script de fonctionner mais ce n'est pas très propre).

signaler à un administrateur
Commentaire de bultez le 13/10/2005 15:55:07

très intéressant, mais plante avec IE :

Event.observe( selects[cpt], 'keypress',
function(e) { if ( e ) e.preventDefault(); }, false );

==> râle sur preventDefault

signaler à un administrateur
Commentaire de zilx le 14/10/2005 01:58:36

j'ai mis à jour le zip.

Le bug sous ie a été corrigé et des explications et commentaires supplémentaires ont été ajoutés.

Pour corriger le bug :

Event.observe( selects[cpt], 'keypress',
function(e) { if ( e ) e.preventDefault(); }, false );

DEVIENT

Event.observe( selects[cpt], 'keypress',
function(e) { if ( !window.event ) e.preventDefault(); }, false );

signaler à un administrateur
Commentaire de bultez le 14/10/2005 08:36:55

encore un petit reproche ? pourquoi
ne pas joindre prototype.js ?

signaler à un administrateur
Commentaire de antony44 le 14/10/2005 08:40:13

Ok pour les bugs.

Je ne veux pas paraître embêtant, mais comment peut-on de manière simple masquer le div qui s'affiche lorsque l'on saisie les éléments de recherche ?

En tout cas, une fois tout bien packagé, ton source risque d'être beaucoup utilisé dans les applications :-)

signaler à un administrateur
Commentaire de zilx le 17/10/2005 00:55:07

>> BULTEZ:  encore un petit reproche ? pourquoi ne pas joindre prototype.js ?

heu bhen c une bonne question... je ne sais pas, je vais l'ajouter dans le zip


>> ANTONY44: Je ne veux pas paraître embêtant, mais comment peut-on de manière simple masquer le div qui s'affiche lorsque l'on saisie les éléments de recherche ?

Pour cela, je vais ajouter une option supplémentaire qui permettra d'afficher ou non le div qui montre la saisie en cours.
Je vais également ajouter une option qui permettra de choisir le délais avant le masquage du div.


Merci pour vos commentaires, ca me permet d'améliorer les scripts !!
A bientôt pour une mise à jour.

signaler à un administrateur
Commentaire de zilx le 18/10/2005 02:03:12

Modifications faites, fichier prototype.js ajouté dans le zip.

Pour que le div ne s'affiche pas il suffit d'ajouter l'option lors de l'appelle du script:

new enhancedSelectTag( {boxShow: false} );

signaler à un administrateur
Commentaire de Anthed le 25/01/2006 00:37:07

La possibilité de faire 'entrée' après avoir trouvé l'item de son choix serait un plus (et pas compliqué en plus). Bonne continuation.

signaler à un administrateur
Commentaire de maelob le 30/01/2008 15:29:34 8/10

Exactement ce que je cherchais, mais il y a encore quelques modifications a faire pour rendre ce code vraiment convivial alors je met 8.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

tooltip et select [ par Djfresh ] salut comment creer un tooltip sur une balise select!plus precisément sur les balises option de la balise select?autrement dit en survolant les balise afficher un div selon choix d'un select [ par pedroso ] Bonjour,je souhaiterais dans mon formulaire afficher ou non un div selon que l'on choisisse tel ou tel élément dans un liste déroulante.en l'ocurrence remplir un select [ par shadow1779 ] Bonjour,je cherche a faire une gestion de produits pour mon site avec catégorie, sous catégorie et produits, pour cela 3 select (n'etant pas dans un f menu [ par mickael_28 ] Bonjour,Je suis confronté à un problème! Je veux créer un menu: à chaque clique sur le nom d'un élément du menu, apparait un sous-menu et lorsqu'on re Option d'un Select [ par Slyders ] Bonjour j'ai un combobox de type Select qui est écris comme sa : &lt;select name="domaine" size="1" =< select case en javascript [ par Juju ] je cherche une sorte un select case mais en javascript, pouvez vous me donner la syntaxe MerciJuju comment dans un select ...? [ par Siriche ] Bonjour,quelqu'un peut-il me dire comment dans un select qui accepte le choix "multiple", on interdit à l'utilisateur de choisir plus que 3 options ?m text /select par javascript [ par dreadlock ] Salut , je cherche un moyen de remplacer une zone de texte par une liste déroulante. Selon le choix du visiteur (par bouton radio) une zone de texte s le type "select" devient un "text" [ par enis ] J'ai une liste déroulante contenant différents métier : &lt;SELECT name="Profession"&gt;&lt;option&gt;----------&lt;/option&gt; &lt;option value= Menu avec des div qui marche pas ss netscape... [ par seyev ] Salut ! j'ai un problème avec ce code... il ne fonctionne que sous IE et je voudrais qu'il fonctionne aussi sous netscape... Comment faire ??*** CODE


Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,577 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.