haltabush | En gros : Classe JS
Code :
- /*
- Remarque :
- - la liste javascript est un tableau qui existe tout le temps
- - la liste HTML est crée, affichée, supprimée à partir de la liste javascript
- - besoin de deux identifant en paramètres pour le retour des valeurs :
- - un identifiant pour retourner la valeur (id_valeur)
- - un identifiant qui contient le texte entré et pour retourner le texte (id_texte)
- */
- //Création d'un objet javascript de type liste déroulante
- function CreerListe(id_liste, nom_liste, hauteur_liste, largeur_liste, id_valeur, id_texte, formulaire) {
- this.id = id_liste;
- this.nom = nom_liste;
- this.hauteur = hauteur_liste;
- this.largeur = largeur_liste
- this.id_valeur = id_valeur;
- this.id_texte = id_texte;
- this.search = "";
- this.nb = 0;
- this.Add = AjouterItem;
- this.Ecrire = EcrireListe;
- this.Actualise = ActualiseListe;
- this.Check = CheckListe;
- this.Lien = LienListe;
- this.Affiche = AfficheListe;
- this.Masque = MasqueListe;
- // this.nom_form = formulaire;
- //tableau des noeuds de la liste
- this.nodes = new Array();
- this.obj = id_liste + "Object";
- eval(this.obj + "=this" );
- return this;
- }
- //Création d'un noeud qui va contenir la valeur et le texte
- function CreerNoeud(valeur, texte){
- this.valeur = valeur;
- this.texte = texte;
- }
- //Correspond à la fonction Add, ajout d'un élément à la liste javascript
- function AjouterItem(valeur, texte){
- //ajout à la fin du tableau d'un noeud contenant une valeur et un texte
- this.nodes.push(new CreerNoeud(valeur, texte));
- this.nb++;
- }
- //Méthode qui écrit/crée la liste HTML, une liste vide pour l'instant
- function EcrireListe() {
- var champ_texte = document.getElementById(this.id_texte);
- //les positions du champs texte sont récupéré
- var posX = (parseInt(champ_texte.style.top)+parseInt(champ_texte.style.height))+'px';
- var posY = champ_texte.style.left;
- var txt = '<div style="position:absolute;top:'+posX+';left:'+posY+';z-index:100;">';
- txt +='<select id="';
- if (document.layers) {
- txt += this.id+"\" name=\""+this.nom+"\" size=\""+this.hauteur+"\" onclick=\""+this.obj+".Lien();\">";
- } else {
- txt += this.id+'" name="'+this.nom+'" size="'+this.hauteur+'" style="width:'+this.largeur+';display:none" onclick="'+this.obj+'.Lien();">';
- }
- txt+="</select><div>";
- document.write(txt);
- }
- //Actualise automatiquement la liste HTML
- function CheckListe(){
- this.Actualise();
- //appel automatique de la fonction CheckListe par l'intermédiaire de this.obj.Check()
- if (document.layers) {
- setTimeout(this.obj+".Check()", 1001)
- } else {
- setTimeout(this.obj+".Check()", 100)
- }
- }
- //Actualise la liste HTML en fonction de contenu du du champ texte
- function ActualiseListe() {
- //récupération de la liste HTML
- listeaux = document.getElementById(this.id);
- //récupération de l'élement HTML qui contient le texte entré par l'utilisateur
- champaux = document.getElementById(this.id_texte).value;
- if (champaux!=this.search) {
- this.search=champaux;
- //la longueur de la liste HTML est remise à zéro
- listeaux.options.length = 0;
- //parcours de la liste javascript et création de la liste HTML
- for (var i=0; i<this.nb; i++) {
- //si le texte de la liste javascript commence par la chaine champaux, on crée un élément pour la liste HTML
- if ( this.nodes[i].texte.substring(0,champaux.length).toUpperCase()==champaux.toUpperCase() ) {
- var o = new Option(this.nodes[i].texte, this.nodes[i].valeur);
- listeaux.options[listeaux.options.length] = o;
- }
- }
- //affectation des attributs à la liste (marche pas sous IE6)
- liste_option = document.getElementById(this.id).getElementsByTagName('option');
- for (i=0; i<liste_option.length; i++){
- liste_option[i].onmouseover = RollOver;
- liste_option[i].onmouseout = RollOut;
- }
- }
- }
- //envoie de la sélection de l'utiliateur dans les deux éléments HTML id_valeur et id_texte
- function LienListe(){
- //récupération de la liste HTML
- listeaux = document.getElementById(this.id);
- //récupération de l'élément HTML id_valeur
- valaux = document.getElementById(this.id_valeur);
- //récupération de l'élément HTML id_texte
- champaux = document.getElementById(this.id_texte);
- //indice sélectionné dans la liste HTML
- i = listeaux.selectedIndex;
- //affectation des champs value et text
- valaux.value = listeaux.options[i].value;
- champaux.value = listeaux.options[i].text;
- //Modif pour l'ajotu de contrat :
- if (champaux.name=="nom_client" && valaux.name=="client" && this.nom=="liste_client" ){
- RemplirContacts();
- }
- else{
- if (champaux.name=="nom_mannequin" && valaux.name=="mannequin" && this.nom=="liste_mann" ){
- fctTestEnfant1();
- this.Masque();
- }
- else{
- //on masque la liste HTML après la sélection
- this.Masque();
- }
- }
- }
- //Affichage de la liste HTML
- function AfficheListe(){
- //récupération de la liste HTML
- listeaux = document.getElementById(this.id);
- //on affiche la liste si elle contient au moins 1 valeur
- if(listeaux.options.length > 0){
- listeaux.style.zIndex=5;
- listeaux.style.display = "block";
- }else{
- this.Masque();
- }
- }
- //Masquage de la liste HTML
- function MasqueListe(){
- //récupération de la liste déroulante
- listeaux = document.getElementById(this.id);
- //si la liste n'est pas déja masquée, on la masque
- if(listeaux.style.display == "block" ){
- listeaux.style.display = "none";
- }
- }
- // coloration au passage de la souris
- function RollOver() {
- this.style.backgroundColor = '#000000';
- this.style.color = '#FFFFFF';
- }
- // retour à l'état normal
- function RollOut() {
- this.style.backgroundColor = '#FFFFFF';
- this.style.color = '#000000';
- }
|
Création de la liste de la saisie auto "maison"
Code :
- var Liste = new CreerListe('liste_client','liste_client',10,200,'client','nom_client');
- <?php
- mysql_select_db($database_connexion_totem, $connexion_totem);
- $requete = "SELECT id_client, raison_sociale FROM client WHERE visible=1 ORDER BY 2";
- $resultat = mysql_query($requete, $connexion_totem) or die(mysql_error());
- while ($ligne = mysql_fetch_assoc($resultat)){
- $id = $ligne['id_client'];
- $rs = $ligne['raison_sociale'];
- print("Liste.Add(\"$id\",\"$rs\" );\n" );
- }
- mysql_free_result($resultat);
- ?>
|
Et enfin, le code HTML:
Code :
- <form id="blabal" action="<? echo $_SERVER['PHP_SELF'];?>" method="post"/>
- <input type="hidden" name="client" id="client" value=""/>
- <input id="nom_client" name="nom_client" autocomplete="off" type="text" onKeyUp="Liste.Affiche();" value="" style="position:absolute;top:35px;left:220px;width:350px;height:22px;z-index:3;"/>
- <script type="text/javascript">
- Liste.Ecrire();
- Liste.Check();
- </script>
- <input type="text" autocomplete="on" id="blabla2" name="blabla2"/>
- </form>
|
Je rappelle que le JS fonctionne, ou du moins semble fonctionner, parfaitement. Le problème c'est que j'aimerais pouvoir remplir le champ "blabla2" avec la saisie semi-auto d'Internet Explorer, et ca mache pô...
Ca va faire 2 jours que je flanche là dessus... J'ai pas grand chose d'autre à faire, mais quand même... Message édité par haltabush le 07-02-2006 à 15:25:54
|