Combobox Muli Columns with header

**meud007** · 07/11/2020, 17h34

Bonjour,
Je suis autodidacte en programmation et néophyte en php/javascript.
Venant de VBA Access, j'ai longtemps cherché un contrôle HTML de type select avec plusieurs colonnes, alimentées par le résultat d'une requête.
Il semble que ça n'existe pas et qu'il faille le créer en jouant avec javascript et css.
A force, j'ai glané et adapté quelques bout de code pour arriver à ça.
Le contrôle fonctionne mais je suis sure que le code est perfectible et encore plein de faute.
Je souhaiterai en insérer plusieurs dans un formulaire comme dans l'exemple.
Vos avis ?
Merci pour votre aide

Code HTML :

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<html>
    <head>
        <meta charset="utf-8" /> 
 
<style>
        .dropdown-row:hover {
                background-color: lightblue;
        }
 
        .col-id {
                display:none;
        }
        .dropdown-body {
                background-color: #e4f0f5;
                overflow-y: auto;
                overflow-x: hidden;
        }
        .dropdown-table {
                border-collapse: collapse;
                //border: 2px solid rgb(200, 200, 200);
                letter-spacing: 1px;
                font-family: sans-serif;
                font-size: .8rem;
                display:none;
        }
        .dropdown-thead {
                background-color: lightgray;
                border: 1px solid rgb(190, 190, 190);
        }       
        .dropdown-td, .dropdown-th {
                padding: 5px 10px;
        }
        .dropdown-td {
                text-align: center;
        }
 
</style> 	
 
	</head>
 
<script>
        function send(){
                alert ('id_user : '+document.getElementById('id_user').value+'\nid_car : '+document.getElementById('id_car').value);
        }
        function charge(c,query){
                document.getElementById(c.id).select();
                var tb=document.getElementById('dropdown-'+c.id);
                tb.innerHTML="";
                
                var header=tb.createTHead();
                var row=header.insertRow(0);
                row.classList.add('dropdown-thead');
                
                var tbody=document.createElement('tbody');
                tbody.setAttribute('id','tbody-'+c.id)
                tbody.classList.add('dropdown-body');
                var cles=Object.keys(query[0]);
                for(var cl=cles.length/2;cl<cles.length;cl++){
                        var cell = document.createElement('th');
                        cell.classList.add('dropdown-th');
                        if (cl==cles.length/2){cell.classList.add('col-id');}
                        var txt = document.createTextNode(cles[cl]);
                        cell.appendChild(txt);
                        row.appendChild(cell);
                }
                tbody.appendChild(row); 
                
                for (var l=0;l<query.length; l++){
                        var row = document.createElement("tr");
                        
                        for(var cl=cles.length/2;cl<cles.length;cl++){                                                  
                                var cell = document.createElement('td');        
                                cell.classList.add('dropdown-td');
                                if (cl==cles.length/2){cell.classList.add('col-id');}                           
                                var txt = document.createTextNode(query[l][cles[cl]]);
                                cell.appendChild(txt);                          
                                row.appendChild(cell);  
                        }       
                        row.classList.add('dropdown-row');
                        row.setAttribute('id','l'+l);                   
                        tbody.appendChild(row);
                }
                tb.appendChild(tbody);
                tb.addEventListener('click', function(){clk(event)}, false);
                tb.style.display='block';
                var id=document.getElementById('id_'+c.id).value;
                if(id){
                        for(var i=1;i<tbody.rows.length;i++){
                                if(tbody.rows[i].cells[0].innerText==id){
                                        tbody.rows[i].style='background-color:lightblue';
                                        break;
                                }
                        }
                }else{
                        tbody.rows[1].style='background-color:lightblue';
                }
        }
        function input(c){
                console.log('input');
                var tbody=document.getElementById('tbody-'+c.id);
                var ct=document.getElementById(c.id);
                var start=ct.selectionStart;
                var end=ct.selectionEnd;
                var ok=false;
                for(var i=1;i<tbody.rows.length;i++){tbody.rows[i].style='background-color:none';}
                for(var i=1;i<tbody.rows.length;i++){           
                        if(tbody.rows[i].cells[1].innerText.indexOf(c.value.toUpperCase())==0 || tbody.rows[i].cells[1].innerText.indexOf(c.value.toLowerCase())==0){
                                c.value=tbody.rows[i].cells[1].textContent
                                ct.selectionStart=start;
                                tbody.rows[i].style='background-color:lightblue';
                                document.getElementById('id_'+c.id).value=tbody.rows[i].cells[0].textContent;
                                ok=true;
                                break;
                        }
                }
                if (!ok){
                        alert('Vous devez faire une sélection dans la liste');
                        document.getElementById('id_'+c.id).value='';
                }
        }
        function keypress(c){
                var ct=document.getElementById(c.id);
                switch(event.keyCode){
                        case 38://up
                                var tbody=document.getElementById('tbody-'+c.id);
                                for(var i=1;i<tbody.rows.length;i++){
                                        console.log(tbody.rows[i].style['background-color']);
                                        if(tbody.rows[i].style['background-color']=='lightblue'){
                                                if(i-1>=1){
                                                        tbody.rows[i].style='background-color:none';
                                                        tbody.rows[i-1].style='background-color:lightblue';
                                                        document.getElementById('id_'+c.id).value=tbody.rows[i-1].cells[0].textContent;
                                                        ct.value=tbody.rows[i-1].cells[1].textContent;
                                                        break;
                                                }
                                        }
                                }
                                break;
                        case 40://down
                                var tbody=document.getElementById('tbody-'+c.id);
                                for(var i=1;i<tbody.rows.length;i++){
                                        if(tbody.rows[i].style['background-color']=='lightblue'){
                                                if(i+1<tbody.rows.length){
                                                        tbody.rows[i].style='background-color:none';
                                                        tbody.rows[i+1].style='background-color:lightblue';
                                                        document.getElementById('id_'+c.id).value=tbody.rows[i+1].cells[0].textContent;
                                                        ct.value=tbody.rows[i+1].cells[1].textContent;
                                                        break;
                                                }
                                        }
                                }
                                break
                                
                        case 13://enter
                                document.getElementById('dropdown-'+c.id).style.display='none';
                                ct.selectionStart=ct.value.length;                      
                                break;                          
                }
                
 
        }
        function blr(c){
                document.getElementById(c.id).style.display='none';
        }
        function clk(){
                var evt=window.event.target;
                if(window.event.target.className=='dropdown-td'){
                        var table=document.getElementById(evt.parentNode.parentNode.parentNode.id);
                        var ctrl=document.getElementById(table.id.split('-')[1]);
                        var row = window.event.target.parentNode.rowIndex;
                        var col = window.event.target.cellIndex;        
                        ctrl.value=table.rows[row].cells[1].textContent;
                        document.getElementById('id_'+ctrl.id).value=table.rows[row].cells[0].textContent;              
                        table.style.display='none';
                }
                
        }
</script>	
 
 	<?php
     $servname = "localhost"; $dbname = "dimap"; $user = "root"; $pass = ""; 
        try{
                $bdd = new PDO("mysql:host=$servname;dbname=$dbname",$user, $pass, array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
        $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);  
        }
        catch(PDOException $e){
                die('Erreur : '.$e->getMessage());
        }
 
        
        $sql="CREATE TABLE IF NOT EXISTS users (id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
                        firstname VARCHAR(30) NOT NULL,
                        lastname VARCHAR(30) NOT NULL,
                        birthdate DATE)";
 
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('McLo', 'Jean-Marc', '1975-5-2')";
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('DOWEL', 'Franck', '1965-1-22')";
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('ZEN', 'André', '1975-8-27')";
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('FOUFOU', 'Marine', '1993-5-2')";
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('ETIENNE', 'Aurélie', '1920-5-2')";
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('DUPONT', 'Laurence', '1998-11-12')";
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('DURAND', 'Nathalie', '1977-10-10')";
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('DUPONT', 'Marc', '1975-5-2')";
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('DUBOIS', 'Martin', '1963-2-25')";
        $bdd->exec($sql);
        $sql="INSERT INTO users (firstname,lastname,birthdate) VALUES ('MEUD', '007', '1973-5-3')";
        $bdd->exec($sql);
 
        $sql="CREATE TABLE IF NOT EXISTS cars (id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
                        car VARCHAR(30) NOT NULL,
                        marque VARCHAR(30) NOT NULL)";
        $bdd->exec($sql);
        $sql="INSERT INTO cars (car,marque) VALUES ('Clio', 'Renault')";
        $bdd->exec($sql);
        $sql="INSERT INTO cars (car,marque) VALUES ('Megane', 'Renault')";
        $bdd->exec($sql);
        $sql="INSERT INTO cars (car,marque) VALUES ('205', 'Peugeot')";
        $bdd->exec($sql);
        $sql="INSERT INTO cars (car,marque) VALUES ('206', 'Peugeot')";
        $bdd->exec($sql);
 
        
        //Les requetes
        $sql="SELECT * FROM users ORDER BY firstname, lastname";
        $query=$bdd->prepare($sql);
        $query->execute();
        $users=json_encode($query->fetchAll());
        $sql="SELECT * FROM cars ORDER BY marque";
        $query=$bdd->prepare($sql);
        $query->execute();
        $cars=json_encode($query->fetchAll());
        ?>
 
	<body> 
		<form>
			<fieldset>
				<legend><h2>Combobox Muli Columns with header</h2></legend>
				<h3>Please complete form</h3>
				<p>
					User : 
					<input name='user' id='user' onkeydown='keypress(this)' oninput='input(this)' onfocus='<?php  echo "charge(this," .$users.")"; ?>' style="width:150px;">					 					 
						<table class='dropdown-table' id='dropdown-user' onmouseleave='blr(this)'></table>
					<input type='hidden' name='id_user' id='id_user'>					 					 
				</p>
				<p>
					Car : 
					<input name='car' id='car' onkeydown='keypress(this)' oninput='input(this)' onfocus='<?php  echo "charge(this," .$cars.")"; ?>' style="width:150px;">					 					 
						<table class='dropdown-table' id='dropdown-car' onmouseleave='blr(this)'></table>
					<input type='hidden' name='id_user' id='id_car'>					 					 
				</p>				
				<p><input type='button' value='submit' onclick='send()';></p>
			</fieldset>  
		</form>
    </body>
</html>

**NoSmoking** · 09/11/2020, 15h51

Bonjour,
j'ai regardé rapidement ton code et je dirais que si il marche c'est le plus important.

Une remarque quand même sur le « séquencement » des opérations, il me paraît pas forcément judicieux de récréer tes liste sur lors du focus, onfocus='<?php echo "charge(this," .$cars.")"; ?>'.

Une autre chose que j'ai vu, c'est cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

tb.addEventListener('click', function(e){clk(event)}, false);

pourquoi ne pas écrire directement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

tb.addEventListener('click', clk, false);

cela simplifierait l'écriture de ta fonction dans la mesure où tu pourrais récupérer directement la référence à la table qui ne sera autre que this.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function clk(evt) {
  const table= this;
  var elem = evt.target;
  if (elem.className == 'dropdown-td') {
    var ctrl = document.getElementById(table.id.split('-')[1]);
    var row = elem.parentNode.rowIndex;
    var col = elem.cellIndex;
    ctrl.value = table.rows[row].cells[1].textContent;
    document.getElementById('id_' + ctrl.id).value = table.rows[row].cells[0].textContent;
    table.style.display = 'none';
  }
}

Voilà après un rapide coup d'oeil.

**meud007** · 10/11/2020, 17h36

Merci pour ces remarques.
Je vais vérifier demain férié ce que ça donne.
J'ai eu beaucoup de mal avec l'event Onclick

Combobox Muli Columns with header

JavaScript

Discussions similaires

Partager

Partager