Selection dans un datalist

Bonjour,

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

Code:

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:

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

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...

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

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:

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:

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; });

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:

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:

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:

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