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>