IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Selection dans un datalist


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    371
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 371
    Par défaut Selection dans un datalist
    Bonjour,

    Je construis à partir d'une base une datalist de la forme suivante:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <input list="browsers">
    <datalist id="browsers">
      <option id="1" value="Internet Explorer">
      <option id="2" value="Firefox">
      <option id="3" value="Chrome">
      <option id="4" value="Opera">
      <option id="5" value="Safari">
    </datalist>

    Je voudrai quand je sélectionne FireFox me retrouver avec un truc du type:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <input list="browsers" value="Firefox">
    <input id="id_browsers" value="2" type="hidden">
    <datalist id="browsers">
      <option id="1" value="Internet Explorer">
      <option id="2" value="Firefox">
      <option id="3" value="Chrome">
      <option id="4" value="Opera">
      <option id="5" value="Safari">
    </datalist>
    Comment faire?
    Cordialement,
    vandman

  2. #2
    Membre chevronné
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    393
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 393
    Par défaut
    Bonjour,

    Je peux me tromper, mais à mon avis, ce que vous voulez obtenir n'est pas la solution à votre problème.
    Sinon, il est toujours possible de modifier le DOM...

  3. #3
    Membre éclairé

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    371
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 371
    Par défaut
    Bonjour,

    Pour préciser ce que je veux faire:
    J'ai un tableau avec deux inforamtions:
    Col1 => le périmètre
    Col2 => l'entité (c'est dans cette colonne que je met actuellement la datalist).

    Lorsque je sélectionne le périmètre, la datalist est modifiée et alimenté en conséquence avec ajax.
    Le problème est qu'il existe des homonymes dans les entités. En alimentant la datalist, je construit un libellé me permettant de faire la différence entre les entités. Comme je récupère l'id de celle-ci, je voudrai pouvoir continuer de l'utiliser car c'est un peu lourd d'avoir à faire et défaire pour retrouver ce dont j'ai besoin.

    Idéalement, je voudrais aussi utiliser cette meme fonction pour diminuer la liste au fur et à mesure que la personne tape [ca fonctionne maintenant].

    Cordialement,
    Vandman

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Les options du datalist ne peuvent pas avoir un ID numérique. Erreur dans Chrome : "Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '#2' is not a valid selector.(…)"

    De plus un ID sur chaque option ne sert à rien, n'oublier pas qu'il s'agit seulement de suggestion de réponse, l'utilisateur peut répondre n'importe quoi.

    Il faut récupérer lé valeur réelle de l'input :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <input list="browsers">
    <input id="id_browsers" value="" type="hidden">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // on peut gérer l'événement "input" ou l'événement "change"
    document.querySelector( "input[list='browsers']" ).addEventListener( "input", function( ev ){
    	document.querySelector( "#id_browsers" ).value = ev.target.value;
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre éclairé

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    371
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 371
    Par défaut
    Bonjour,

    Le datalist ne fonctionne pas pour ce que je veux faire. Je me suis donc pris la tête à le refaire à ma sauce.

    Voici mon code PHP pour la cellule:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    echo " <td class=\"LUCol3\"".$couleur.">\n";
     echo " <input id=\"Input_" . $champ1['login'] ."\" class=\"TdInput\" ";
     echo "onkeypress=\"";
     echo "var e=this; ";
     echo "setTimeout(function() {";
     echo "	GetListRegie('Perimetre_" . $champ1['login'] . "','Input_" . $champ1['login'] . "', e.value, this )";
     echo "}, 50); \" ";
     echo "onresize=\"";
     echo "var e=this; ";
     echo "setTimeout(function() {";
     echo "	GetListRegie('Perimetre_" . $champ1['login'] . "','Input_" . $champ1['login'] . "', e.value, this )";
     echo "}, 50); \" ";
     echo "placeholder=\"Nom de l entité\"></input>\n";
     echo " </td>\n";
    Le code PHP pour le div me permettant de faire mon datalist:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    27
    28
    echo "<div id=\"cadre_recherche_rapide_entite\"";
     echo "style=\"";
     //echo "visibility: hidden; ";
     echo "overflow-x: auto; ";
     echo "overflow-y: scroll; ";
     echo "position: absolute; ";
     echo "left: 21.645%; ";
     echo "top: 0%; ";
     echo "max-width: 28%; ";
     echo "max-height: 8.5%; ";
     echo "z-index: 1; ";
     echo "text-align: left; ";
     echo "background-color: #e5f1f4; ";
     //echo "background-color: rgb(214, 231, 239); ";
     //echo "color: rgb(115, 73, 206); ";
     //echo "font-size: 11px; ";
     //echo "font-family: Arial; ";
     echo "font: 95% Arial, Helvetica, sans-serif; ";
     //echo "padding-left: 5px; ";
     echo "border-width: 0px; ";
     echo "border-style: solid; ";
     //echo "border-color: rgb(66, 121, 198) rgb(132, 130, 132) rgb(132, 130, 132) rgb(66, 121, 198); ";
     echo "\">\n";
     echo " <table id=\"table_recherche_rapide_ entite\">\n";
     echo "  <tbody id=\"tbody_recherche_rapide_ entite\">\n";
     echo "  </tbody>\n";
     echo " </table>\n";
     echo " </div>\n";
    Ma fonction Ajax permettant d'alimenter dynamiquement mon Datalist:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    // Fonction permettant de récupérer la position d'un élément et d'en placer un autre en dessous.
    function FindPos(element) {
        var top = 0, left = 0;
        var OfsetTop = element.offsetHeight;
        var MaxWidth = element.offsetWidth;
        top += OfsetTop;
        do {
            top += element.offsetTop  || 0;
            left += element.offsetLeft || 0;
            element = element.offsetParent;
        } while(element);
     
        return {
            top: top,
            left: left,
            Width : MaxWidth
        };
    }
     
    function GetListentite(Select, InputId, Inputentite, toto) {
     var DivCRRR = document.getElementById('cadre_recherche_rapide_entite');
     var input =  document.getElementById(InputId);
     if (input) {
      PosToto=FindPos(input);
      titi = DivCRRR.style.left;
      DivCRRR.style.left = PosToto.left + "px";
      DivCRRR.style.top = PosToto.top + "px";
      DivCRRR.style.width = PosToto.Width + "px";
     }
     var categorie = document.getElementById(Select).value;
     var Iddatalist = InputId;
     var entiteLike = Inputentite.toUpperCase();
     var xhrOCP = new getXhr();
     // On défini ce qu'on va faire quand on aura la réponse
     if ( (categorie === "" || categorie === "SANS PERIMETRE") && entiteLike === "" ) {
      SendPost = "";
     } else if ( (categorie === "" && categorie === "SANS PERIMETRE") && entiteLike !== "" ) {
      SendPost = "nomentite=" + entiteLike;
     } else if ( (categorie !== "" && categorie !== "SANS PERIMETRE") && entiteLike === "" ) {
      SendPost = "id_categorie=" + categorie;
     } else if ( (categorie !== "" && categorie !== "SANS PERIMETRE") && entiteLike !== "" ) {
      SendPost = "id_categorie=" + categorie + "&nomentite=" + entiteLike;
     }
     
     xhrOCP.open("POST", "./php/ajax_Listeentite.php", true);
     xhrOCP.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     if (SendPost === "") {
      xhrOCP.send();
     } else {
      xhrOCP.send(SendPost);
     }
     // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
     xhrOCP.onreadystatechange = function() {
      if (xhrOCP.readyState == 4 && xhrOCP.status == 200) {
       reponse = xhrOCP.responseXML.documentElement;
       var TbodyRPR = document.getElementById('tbody_recherche_rapide_entite');
       //var x = document.getElementById(Iddatalist);
       //var option;
       //while (x.childElementCount > 0) {
           //x.removeChild(x.childNodes[x.childElementCount]);
           //x.remove(x.childElementCount-1);
       //}
       while (TbodyRPR.childElementCount > 0) {
           TbodyRPR.removeChild(TbodyRPR.childNodes[TbodyRPR.childElementCount]);
           //x.remove(x.childElementCount-1);
       }
       titi=reponse.childElementCount;
       //if (reponse.childElementCount < 11) {
     //var TbodyRPR = document.getElementById('tbody_recherche_rapide_entite');
     var Tr;
     var Td;
     var Texte;
     for (i = 0; i < reponse.childElementCount; i++) {
      Typeentite = reponse.children[i].getAttribute("type");
      Identite = reponse.children[i].getAttribute("id_entite");
      Nomentite = reponse.children[i].firstChild.nodeValue;
      //Création d'une ligne
      Tr = document.createElement("tr");
      Tr.setAttribute("id", Identite);
      Tr.onclick = function() { Inputentite() };
      Tr.onmouseout = function() { InputentiteHide("\"cadre_recherche_rapide_entite\"") };
      Tr.onmouseover = function() { InputentiteHide("\"cadre_recherche_rapide_entite\"") };
      //Création de la première cellule
      Td = document.createElement("td");
      Td.style.textAlign = 'left';
      Td.style.borderRightColor = '#e5f1f4';
      Td.style.borderLeftColor = '#e5f1f4';
      Texte = document.createTextNode(Typeentite);
      Td.appendChild(Texte);
      Tr.appendChild(Td);
      //Création de la 2ème cellule
      Td = document.createElement("td");
      Td.style.textAlign= 'left';
      Td.style.borderRightColor = '#e5f1f4';
      Td.style.borderLeftColor = '#e5f1f4';
      Texte = document.createTextNode(Nomentite);// Nom de la régie
      Td.appendChild(Texte);
      Tr.appendChild(Td);
      TbodyRPR.appendChild(Tr);
      test = 0;
     }
       //}
      }
     };
    }
    J'ai quelque souci avec cette facon de faire:
    Je n'arrive pas a utiliser les fonctions onclick, onmouseout et onmouseover. Pourquoi? Je suppose que le probleme vient de ma manière de déclarer les fonctions?
    Je n'arrive pas non plus à utiliser la fonction onresize dans le code PHP? Pourquoi???

    Cordialement,
    Vandman

Discussions similaires

  1. Multi-selection dans une ComboBox ?
    Par Moloko dans le forum MFC
    Réponses: 5
    Dernier message: 07/07/2021, 17h26
  2. Réponses: 8
    Dernier message: 05/05/2004, 16h28
  3. select dans un trigger sous Postgresql
    Par kastor_grog dans le forum Requêtes
    Réponses: 1
    Dernier message: 03/09/2003, 17h00
  4. [Sybase] Select dans une select loop en C
    Par Claudio dans le forum Sybase
    Réponses: 2
    Dernier message: 29/04/2003, 18h06
  5. faire un selection dans une image aves les APIs
    Par merahyazid dans le forum C++Builder
    Réponses: 3
    Dernier message: 30/04/2002, 10h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo