Récupération valeur JS d'un INPUT pour l'autocomplétion

**ddaweb** · 15/05/2025, 23h32

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) :

Nom : Interface.png
Affichages : 99
Taille : 46,7 Ko

Nom : Interface.png
Affichages : 99
Taille : 46,7 Ko

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)

Nom : autoCompletion.png
Affichages : 79
Taille : 13,7 Ko

Nom : autoCompletion.png
Affichages : 79
Taille : 13,7 Ko

**mathieu** · 16/05/2025, 00h44

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** · 16/05/2025, 17h36

Envoyé par 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.

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** · 20/05/2025, 17h39

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** · 31/05/2025, 19h30

Envoyé par domi65

Ç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" />

Nom : encodage_UTF-8.png
Affichages : 24
Taille : 2,4 Ko

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

Nom : session.png
Affichages : 24
Taille : 19,2 Ko

**mathieu** · 31/05/2025, 20h39

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** · 31/05/2025, 23h09

Envoyé par mathieu

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** · Hier, 00h39

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** · Hier, 15h29

Envoyé par 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** · Hier, 16h29

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.

Récupération valeur JS d'un INPUT pour l'autocomplétion

JavaScript

Discussions similaires

Partager

Partager