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>