Discussion :

[ddaweb]

Bonsoir � tous,

Je me casse les dents sur un champs d'autocompl�tion en JQuery (cherche du nom du membre avec son N�) qui fonctionne tr�s bien quand l'input est introduite avec un clavier, mais pas lorsque que c'est via un clavier tactile en JS.

D'abord un petit screen de la page concern�e o� j'ai introduit le n� membre via le tactile, pour lequel je doit faire autocompl�tion (c'est une caisse bar en web, avec ouverture du tiroir pour les paiements cash) :



NB : mon Wamp local ne g�re pas l'UTF-8, je dois encore chercher pourquoi, voir le r�installer

J'ai r�ussi � sauver cette valeur en COOKIE et SESSION via JS dans le code du clavier tactile -> je les retrouve bien dans la console et se met � jour avec le tactile :

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
	<script type='text/javascript'>
	function nrMbr() {
		var nr_mbr = activeinput.value
		sessionStorage.setItem("nr_mbr", nr_mbr)
		document.cookie = "nr_mbr = " + nr_mbr;
	}
 
	var activeinput
 
	function populateTd(){
		var tdcollection=document.getElementsByTagName('table')[0].getElementsByTagName('td')
		for (i=0;i<tdcollection.length;i++){
			tdcollection[i].indice=i
			tdcollection[i].onmouseover=function(){this.className='over'}
			tdcollection[i].onmouseout=function(){this.className='up'}
			tdcollection[i].className='up'
			tdcollection[i].onmousedown=function(){this.className='down'}
			tdcollection[i].onmouseup=function(){this.className='up'}
 
			tdcollection[i].onclick=function(){
				if (!!activeinput){
					if(this.indice<11){activeinput.value+=this.innerHTML;}
					if(this.indice==11){activeinput.value=activeinput.value.substr(0,activeinput.value.length-1)}
					if(this.indice==12){activeinput.value=""}
					JouerSon()
					nrMbr()
				}
			}
		}
	}
 
	function highlightActive(obj){
		var inputcollection=document.getElementsByTagName('input')
		for(i=0;i<inputcollection.length;i++){
 
			inputcollection[i].style.backgroundColor=(inputcollection[i]==obj)?"lime":"white"
		}
	}
	</script>

Mais la recherche d'autocompl�tion ne s'active pas !!
Activation de l'autocompl�tion :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
<script>
	$(function() {
		$("#note_mbr").autocomplete({
			source: "./pages/div4/autocompletion/auto_membre_id.php",
			minLength: 1,
		});
	});
</script>

Recherche dans DB

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
// ----- Récupération des caractères introduits 
//$searchTerm = $_GET['term']; // ----- Via clavier
 
$searchTerm = $_COOKIE ['nr_mbr'];  // ----- Via tactile
 
// ----- Recherche en fonction des caractères introduits
$query = $conn_cecs->query("SELECT p_prenom, p_nom, p_reinscription FROM 02_prop WHERE id_prop='$searchTerm'"); 
 
// ----- Génération du ARRAY des données affichées
$array_id=array();
$date_jour2=date('Y-m-d');
 
if($query->num_rows > 0){ 
    while($row = $query->fetch_assoc()){ 
		$cot=$row['p_reinscription'];
		$cot_fin=date ('Y-m-d',strtotime('+ 1 year + 21 days',strtotime($cot)));
		if ($cot_fin>$date_jour2) { $data['value'] = $row['p_prenom'].' '.$row['p_nom']; }
		else { $data['value'] = 'Ne peut plus avoir de compte'; }
        array_push($array_id, $data); 
    } 
} 
 
// ----- Traiter le ARRAY en données json
echo json_encode($array_id);

Le code du formulaire pour le N� de membre, l'ID sert pour l'autocompl�tion et onfocus pour le tactile :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
/ -------------------- Note de bar membre
if ($mode=='Caisse' || ($mode=='Liste_compte' && !isset($_SESSION['pas_de_compte'])) || ($mode=='Liste_cash' && !isset($_SESSION['pas_de_compte']) && $cours_jour_cloture=='non')) {
	print "<div style=\"float: left; width: 50%;\" align=\"center\">";
		if ($prix_commande>0) {
			if ($activite_membre=='oui' && $mode=='Caisse') { $value_note_mbr=14; }
				else { $value_note_mbr=''; }
			print "<form name=\"note_mbr\" method=\"post\" action=\"?Compte_membre\">";
				print "<input type=\"text\" name=\"note_mbr\" value=\"$value_note_mbr\"  id=\"note_mbr\" style=\"width: 70px; height: 40px; font-size: 16px; font-weight: bold; color:#fff; text-align: center; letter-spacing: 2px; background-color: #7093FE  ; border: 1px solid #1f618d ; border-radius: 6px;\" onfocus=\"activeinput=this\" onclick=\"JouerSon()\" />&nbsp;&nbsp;&nbsp;";
				print "<input type=\"submit\" class=\"submit_note_mbr\" value=\"&nbsp;\" onclick=\"JouerSon()\" />";
			print "</form>";
		}
	print "</div>";

Si quelqu'un a une id�e comment transmettre l'information du N� membre � l'autocompl�tion lorsque c'est le tactile qui travaille, je suis dessus depuis 3 jours sans succ�s.
J'esp�re avoir �t� compr�hensible dans mes explications et que les codes vous permettrons de comprendre

D'avance merci pour votre aide,
DDAWEB

EDIT : le clavier est un tableau avec TR - TD mit en page via CSS

Un screen de l'autocompl�tion via clavier (un membre ne pouvant plus avoir de compte pour pr�server l�anonymat des membres)

[mathieu]

essayez peut-�tre la m�thode "search" qui a l'air de lancer la recherche :
https://api.jqueryui.com/autocomplete/#method-search

si le r�sultat de la recherche ne s'affiche pas, regardez dans la console de d�veloppement de votre navigateur si la requ�te http est bien lanc�e et si la r�ponse est correcte.

[ddaweb]

essayez peut-�tre la m�thode "search" qui a l'air de lancer la recherche :
https://api.jqueryui.com/autocomplete/#method-search

si le r�sultat de la recherche ne s'affiche pas, regardez dans la console de d�veloppement de votre navigateur si la requ�te http est bien lanc�e et si la r�ponse est correcte.

Si je comprends bien le SEARCH, cela se passe via un ARRAY : cr�er un ARRAY avec le N� membre et son nom (multidimensionnel) est facile � faire, mais pour la recherche ??
L'autocompl�tion affiche le nom du membre en fonction de son N� de membre.

Je vais approfondir cela, mais j'ai un doute
Si le N� de membre ne peux plus avoir de compte (plus membre, vu qu'un membre est enregistr� � vie), j'essaierai de mettre la mention qu'il ne peut plus avoir de compte (souvent une erreur de frappe de la personne au bar) ... de toute mani�re ce sera bloqu� par apr�s, � la sauvegarde

[domi65]

mon Wamp local ne g�re pas l'UTF-8

�a, j'ai du mal � y croire !

- Soit la page n'a pas dans le <head> la balise
<meta charset="UTF-8">
- Soit le site a �t� �crit avec un �diteur cal� sur de l'ISO (le plus probable), il faut alors le convertir via, par exemple, un script PHP
- Soit, ce qui est �crit dans les boutons (bi�res, alcools) provient d'une BDD et alors il faut utiliser la fonction utf8_encode()

[ddaweb]

�a, j'ai du mal � y croire !

- Soit la page n'a pas dans le <head> la balise
<meta charset="UTF-8">
- Soit le site a �t� �crit avec un �diteur cal� sur de l'ISO (le plus probable), il faut alors le convertir via, par exemple, un script PHP
- Soit, ce qui est �crit dans les boutons (bi�res, alcools) provient d'une BDD et alors il faut utiliser la fonction utf8_encode()

Je ne sais pas trop d'o� cela provient, d�s que je suis sur l'h�bergeur, tout est OK.
Ce probl�me est apparu apr�s r�installation de mon W11 home vers Pro et donc de Wamp par cons�quence, j'ai t�l�charg� les pages depuis l'h�bergeur et export�/import� la BDD dans Wamp : je suis donc avec 100% des fichiers et BDD de l'h�bergement (juste l'HTACCESS de l'h�bergement que je dois supprimer ou renommer).
Mais en effet, tout ce qui est de la BDD pose probl�me, m�me un autre site, ce qui pointerait sur MySQL ? je suis en "utf8mb4_unicode_ci" pour la BDD

Edit : j'ai oubl� la m�ta UTF-8 et l'encodage NP++ :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 Unicode" />

Pour mon probl�me, je n'ai pas encore trouv� de solution.
Si je pouvais r�cup�rer les valeurs SESSION ou COOKIE enregistr�s depuis le JS (ici "nr_mbr" � 1) et faire l'autocompl�tion

[mathieu]

j'ai fait un test qui fonctionne aussi bien avec les boutons des chiffres qu'en �crivant dans le champ texte :

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
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
 
 
<div class="conteneur_nombre"></div>
<input id="note_mbr"/>
 
 
<script>
"use strict";
 
 
$(function() {
	$("#note_mbr").autocomplete({
		"source" : (request, response) => {
			response([`recherche de "${request["term"]}"`]);
		},
	});
});
 
 
document.addEventListener("DOMContentLoaded", e => {
 
	const conteneur_nombre = document.getElementsByClassName("conteneur_nombre")[0];
 
 
	(new Array(9)).keys().forEach(n => {
 
		const nb = n + 1;
 
		const bouton_nombre = document.createElement("span");
 
		bouton_nombre["textContent"] = nb;
		bouton_nombre["classList"].add("bouton_nombre");
 
		conteneur_nombre.appendChild(bouton_nombre);
 
		bouton_nombre.addEventListener("click", e => {
			$("#note_mbr").val($("#note_mbr").val() + nb);
			$("#note_mbr").autocomplete("search");
		});
 
	});
 
 
});
 
</script>
 
 
<style>
 
body *
{
	font-size : 140%;
}
 
.conteneur_nombre
{
 
	margin : 1.5em;
 
	span
	{
		background : #DFE;
		margin : 1em;
		padding : 1em;
		border-radius : 5px;
	}
 
}
 
 
</style>

[ddaweb]

j'ai fait un test qui fonctionne aussi bien avec les boutons des chiffres qu'en �crivant dans le champ texte :

Bonsoir Mathieu,

Merci pour ce bout de code, je vais regarder � le mettre au(x) bon(s) emplacement(s), le JS est tr�s loin d'�tre mon fort
C'est sur plusieurs pages chez moi.
Tes codes sont en g�n�ral tr�s pertinents, je n'ai aucun doute que ce sera possible.

Je vois �galement qu'une petite m�j de mon JQuery s'impose, il est vrai que cette page date un peu et n'ai jamais song� � faire cette m�j pour cette interface (celle de gestion est bien � jour elle) : 3.6 et 1.12.1 chez moi.

DDA

[ddaweb]

Ton script fonctionne nickel.

J'y ai int�gr� mon clavier num�rique � la va vite et l� ce n'est plus d�tect�, cela correspond exactement � mon probl�me.
C'est un code simplifi� de mes pages, reprenant tous les �l�ments sur 1 seule page.

Edit : il faut d'abord cliquer dans le input avant d'utiliser le clavier num�rique

Je peux mettre mon JQuery � jour sans probl�me, mais je dois avoir bricol� dans le CSS du JQuery pour la mise en page du clavier num�rique : le code de cr�ation est de 2016, avec tr�s peu de modifications depuis, dont la m�j pour passer de PHP 5.6 � PHP 7.4, PHP 8.3 ne passe pas, les erreurs que je vois sont essentiellement du codage pas assez pr�cis plus tol�r� � cette version

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
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
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
 
<body onload='populateTd()'>
 
 
<script>
"use strict";
 
 
$(function() {
	$("#note_mbr").autocomplete({
		"source" : (request, response) => {
			response([`recherche de "${request["term"]}"`]);
		},
	});
});
 
 
document.addEventListener("DOMContentLoaded", e => {
 
	const conteneur_nombre = document.getElementsByClassName("conteneur_nombre")[0];
 
 
	(new Array(9)).keys().forEach(n => {
 
		const nb = n + 1;
 
		const bouton_nombre = document.createElement("span");
 
		bouton_nombre["textContent"] = nb;
		bouton_nombre["classList"].add("bouton_nombre");
 
		conteneur_nombre.appendChild(bouton_nombre);
 
		bouton_nombre.addEventListener("click", e => {
			$("#note_mbr").val($("#note_mbr").val() + nb);
			$("#note_mbr").autocomplete("search");
		});
 
	});
 
 
});
</script>
<script type='text/javascript'>
	var activeinput
 
	function populateTd(){
		var tdcollection=document.getElementsByTagName('table')[0].getElementsByTagName('td')
		for (i=0;i<tdcollection.length;i++){
			tdcollection[i].indice=i
			tdcollection[i].onmouseover=function(){this.className='over'}
			tdcollection[i].onmouseout=function(){this.className='up'}
			tdcollection[i].className='up'
			tdcollection[i].onmousedown=function(){this.className='down'}
			tdcollection[i].onmouseup=function(){this.className='up'}
 
			tdcollection[i].onclick=function(){
				if (!!activeinput){
					if(this.indice<11){activeinput.value+=this.innerHTML;}
					if(this.indice==11){activeinput.value=activeinput.value.substr(0,activeinput.value.length-1)}
					if(this.indice==12){activeinput.value=""}
					JouerSon()
				}
			}
		}
	}
 
	function highlightActive(obj){
		var inputcollection=document.getElementsByTagName('input')
		for(i=0;i<inputcollection.length;i++){
 
			inputcollection[i].style.backgroundColor=(inputcollection[i]==obj)?"lime":"white"
		}
	}
 
</script>
 
 
<style>
 
body *
{
	font-size : 140%;
}
 
.conteneur_nombre
{
 
	margin : 1.5em;
 
	span
	{
		background : #DFE;
		margin : 1em;
		padding : 1em;
		border-radius : 5px;
	}
 
}
td {cursor:hand;}
.div_pave_numerique {
	float: left;
	padding : 10px;
	border: 2px solid #aaa;
	border-radius: 10px;
	box-shadow: 4px 6px 5px #ccc;
	background-color: #fff;
} 
/* ---------- Pavé numérique ---------- */
.up {	border: solid 1px #333;
		height:40px;
		width:40px;
		text-align:center;
		font-weight: bold;
		background-color: #ddd;
		border-radius: 6px;
}
.down {border: solid 1px #333;
		height:40px;
		width:40px;
		text-align:center;
		font-weight: bold;
		background-color: #04B4AE;
		border-radius: 6px;
}
.over {	border: solid 1px #333;
		height:40px;
		width:40px;
		text-align:center;
		font-weight: bold;
		background-color: #bbb;
		border-radius: 6px;
}
 
</style>
<div class="div_pave_numerique">
	<table cellspacing="10">
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td colspan=2>0</td>
			<td>.</td>
		</tr>
		<tr>
			<td><--</td>
			<td colspan=2>SUP</td>
		</tr>
	</table>
</div>
 
<div class="conteneur_nombre"></div>
<input  name="note_mbr" id="note_mbr"  onfocus="activeinput=this" />
 
</body>

[ddaweb]

Je peux mettre mon JQuery � jour sans probl�me, mais je dois avoir bricol� dans le CSS du JQuery pour la mise en page du clavier num�rique : le code de cr�ation est de 2016, avec tr�s peu de modifications depuis, dont la m�j pour passer de PHP 5.6 � PHP 7.4, PHP 8.3 ne passe pas, les erreurs que je vois sont essentiellement du codage pas assez pr�cis plus tol�r� � cette version

Ce n'est pas grand chose � modifier pour passer en PHP 8.3.7 (derni�re version de mon WAMP) : juste mettre entre apostrophes les champs texte du array multidimensionnel dans quelques pages
Je croyais l'avoir fait en passant � 7.4, mais apparemment pas pour cette interface, le reste du code est fonctionnel (juste des WARNING), je dois tester en profondeur maintenant.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

$cat0[$liste_vente_id]['nbr_article']=$cat0[$liste_vente_id]['nbr_article']+$liste_vente_nbr;

[ddaweb]

Je fais un petit monologue

Un grand merci Mathieu, j'ai trouv� gr�ce � ton script, il suffisait simplement d'ajouter "$("#note_mbr").autocomplete("search");" aux bon endroits dans "function populateTd()" : lignes 13 et 14 ci-dessous.
Ce n'est pas grand chose � faire, le reste du code reste identique, voici le code final du JS en question :

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
	function populateTd(){
		var tdcollection=document.getElementsByTagName('table')[0].getElementsByTagName('td')
		for (i=0;i<tdcollection.length;i++){
			tdcollection[i].indice=i
			tdcollection[i].onmouseover=function(){this.className='over'}
			tdcollection[i].onmouseout=function(){this.className='up'}
			tdcollection[i].className='up'
			tdcollection[i].onmousedown=function(){this.className='down'}
			tdcollection[i].onmouseup=function(){this.className='up'}
 
			tdcollection[i].onclick=function(){
				if (!!activeinput){
					if(this.indice<11){activeinput.value+=this.innerHTML; $("#note_mbr").autocomplete("search");}
					if(this.indice==11){activeinput.value=activeinput.value.substr(0,activeinput.value.length-1); $("#note_mbr").autocomplete("search");}
					if(this.indice==12){activeinput.value=""}
					JouerSon()
				}
			}
		}
	}

Vous en aviez d�j� parl� en #2 comme 1�re r�ponse, mais je n'avais pas trouv� comment faire.

J'ai �t� mis sur la piste par un autre pav� num�rique tactile que j'ai test� comme je n'arrivais pas avec le mien : https://stackoverflow.com/questions/...pad-in-website
Celui-ci est beaucoup plus simple � mettre en oeuvre quand on commence, mais dans mon cas, j'ai pas mal de chose � modifier car ce m�me pav� num�rique est utilis� � plusieurs endroits pour diff�rentes fonctionnalit�s : introduire le N� membre, login dans l'interface et code de niveau sup�rieur pour valider une modification ou suppression.
C'est donc tr�s bien comme maintenant

Je vais regarder pour la m�j du JQuery (faille de s�curit� peut-�tre pr�sente dans ma version), mais je dois retrouver l'endroit du CSS pour la mise en page personnalis�e du r�sultat et le documenter.