IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Membre chevronné Avatar de ddaweb
    Homme Profil pro
    Webmaster amateur
    Inscrit en
    Janvier 2013
    Messages
    331
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster amateur
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Janvier 2013
    Messages : 331
    Par défaut Récupération valeur JS d'un INPUT pour l'autocomplétion
    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 : 32
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 : 23
Taille : 13,7 Ko

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 597
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 597
    Par défaut
    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.

  3. #3
    Membre chevronné Avatar de ddaweb
    Homme Profil pro
    Webmaster amateur
    Inscrit en
    Janvier 2013
    Messages
    331
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster amateur
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Janvier 2013
    Messages : 331
    Par défaut
    Citation Envoyé par mathieu Voir le message
    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

Discussions similaires

  1. Récupérer valeur Input pour afficher en fin d'URL
    Par Charlotte90 dans le forum Langage
    Réponses: 3
    Dernier message: 20/07/2020, 16h30
  2. Réponses: 2
    Dernier message: 14/11/2014, 08h22
  3. Récupérer valeur de 2 input pour paramètres jQuery
    Par hannibal974 dans le forum jQuery
    Réponses: 9
    Dernier message: 16/05/2013, 16h23
  4. Gérer valeur input pour création url, redirection
    Par cl9m9n7 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 06/09/2011, 07h37
  5. Réponses: 3
    Dernier message: 07/10/2008, 11h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo