Affichage dynamique en fonction de la saisie utilisateur

Résolu
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009 - 25 juil. 2008 à 18:00
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009 - 29 juil. 2008 à 10:57
Lut à tous,

Je souhaite afficher de façon dynamique des résultats en fonction de la saisie d'un utilisateur.

Je m'explique :

Une page de mon intranet affiche la liste du personnel et leurs numéros de téléphones. Ces données sont issues
d'un base access. Toutes les personnes sont donc affichées sur ma page.

Ce que je souhaite, c'est ajouter deux zones pour l'utilisateur. Une ou il saisirait les premières lettres
du nom ou du prénom et l'autre qui afficherait de façon dynamique (au fur et à mesure de la frappe), une liste
des personnes dont le nom contient les caractères de la saisie.

En gros, je tape T dans ma premiere zone et la seconde zone se remplit avec les personnels Titi, Toto, Tata ...
sous forme de liste téléphonique (bref toutes les personnes dont le nom ou le prenom contient un t)

Ou je bloque c'est pour passer le contenu saisi dans la zone de texte  par l'utilisateur en variable utilisable
dans ma requête

<cfquery name= "ListeDetFR" datasource="Access">
SELECT *
FROM Personnel
WHERE Nom LIKE '% VARIABLE = LA SAISIE DE L'UTILISATEUR %'
ORDER BY Nom ASC
</cfquery>

Je pensais utiliser pour ça une fonction javascript style et peut être un Cfloop

<script language ="javascript" type="text/javascript">
function Saisie()
 {  var Sais=document.getElementById('Saisie').value; }
</script>

Mais rien à faire

Help et par avance merci

8 réponses

nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
28 juil. 2008 à 14:49
Dans ce cas il faut que tu utilises Ajax pour envoyer la saisie et récupérer le résultat sans rafraichir l'ensemble de la page.

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog
3
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
27 juil. 2008 à 11:16
Bonjour,

pour passer les variables du client au serveur tu disposes de plusieurs solutions :
Via un form en mode POST ou GET
Via l'URL.

Ensuite coté serveur (ex: la valeur est transmise via la variable "saisie") :
<cfparam name="saisie" type="string" default="" />

<cfquery name="ListeDetFR" datasource="Access">
SELECT *
FROM Personnel
WHERE Nom LIKE '%#saisie#%'
ORDER BY Nom ASC
</cfquery>

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog
0
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009
28 juil. 2008 à 10:45
Lut et merci pour la réponse.

Donc sur le principe ça doit donner je pense quelque chose comme ça :
Mais rien à faire il ne veut pas de mon #form.saisie# ??

<cfquery name="ListeDetFR" datasource="Access">
 SELECT *
 FROM Personnel
 WHERE Nom LIKE '%#form.saisie#%'
 ORDER BY Nom ASC
</cfquery>

(...)

<cfform name="form" id="form" method="post" action="">
      ----

      <cfinput type="text" name="saisie" id="saisie" onChange=   
   "document.forms[0].submit()">
     ,
      
 

</cfform>




<cfform action="resultat.cfm?#client.URLToken#" method="post" name="resultat" target="_self" onsubmit="pageLoad_onsubmit()">





   <cftextarea name="resultat" id="resultat"></cftextarea></td>
       <cfoutput query="ListeDetFR"> </cfoutput>
</cfform>
0
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
28 juil. 2008 à 11:34
Re,

dans la page qui reçoit "saisie", fait un dump de la variable serveur FORM pour voir ce que le serveur reçoit.
Autre chose, n'utilises pas des noms réservés au niveau ID ou Name comme "form".
<cfform name="myform" id="myform" method="post" action="">
      ----

      <cfinput type="text" name="saisie" id="saisie" onChange=   
   "document.forms[0].submit()">
     ,
      
 

</cfform>

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009
28 juil. 2008 à 11:46
Cool ça marche ... presque lol

Ok je vais suivre ton conseil concernant les noms réservés et je vais modifier ça.
Dernier soucis à régler ... elle est pas trés dynamique ma page dans la mesure ou je dois valider ma saisie pour faire afficher le tableau (et je voudrais que l'affichage se fasse en cours de saisie). Peut être existe t'il un autre évenement que le onchange qui forcerait l'actualisation ou doit t'on jouer du cfloop ?

Dans tous les cas encore merci pour les conseils précédents

Cldt

La requête

<cfquery name="ListeDetFR" datasource="Access">
SELECT *
 FROM Personnel
 WHERE Nom LIKE '%#saisie#%'
 ORDER BY Nom ASC
</cfquery>

La variable

<cfset saisie=#form.saisie#>

Le reste !

<cfform name="form" id="form" method="post" action="">
      ----

      <cfinput type="text" name="saisie" id="saisie" onChange="document.forms[0].submit()">,
      &nbsp;
        <table width="701" border="1">
          ----

           , Nom</td>
            T&eacute;l&eacute;phone,
            Portable,
            Site,
         
     
 <cfform action=\"resultat.cfm?\" method=\"post\" name=\"resultat\" target=\"_self\" onsubmit=\"pageLoad_onsubmit()\">   
          <cfoutput query=\"ListeDetFR\" startRow=\"#StartRow_ListeDetFR#\" maxRows=\"#MaxRows_ListeDetFR#\">
            ----

              #ListeDetFR.Nom#,
              #ListeDetFR.Téléphone#,
              #ListeDetFR.Portable#,
              #ListeDetFR.Site#,
           
          </cfoutput>
 </cfform>
 
     
</td>
    </tr>
  </table>


</cfform>
0
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
28 juil. 2008 à 13:52
Re,

j'ai pas très bien compris ta dernière question ou ton problème:
Peut être existe t'il un autre évenement que le onchange qui forcerait l'actualisation ou doit t'on jouer du cfloop ?

Autres points :
- tu ne peux pas imbriqué les forms !
- Retirer le ? de action="resultat.cfm?"
- nom et id du FORM <> form

      ----

            <cfform name="myform" id="myform" method="post" action="">
         <cfinput type="text" name="saisie" id="saisie" onChange="document.forms[0].submit()"> 
      </cfform>
      ,
      &nbsp;
        <table width="701" border="1">
          ----

           , Nom</td>
            T&eacute;l&eacute;phone,
            Portable,
            Site,
         
     
 <cfform action=\"resultat.cfm\" method=\"post\" name=\"resultat\" target=\"_self\" onsubmit=\"pageLoad_onsubmit()\">   
          <cfoutput query=\"ListeDetFR\" startRow=\"#StartRow_ListeDetFR#\" maxRows=\"#MaxRows_ListeDetFR#\">
            ----

              #ListeDetFR.Nom#,
              #ListeDetFR.Téléphone#,
              #ListeDetFR.Portable#,
              #ListeDetFR.Site#,
           
          </cfoutput>
 </cfform>
 
     
</td>
    </tr>
  </table>

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog
0
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009
28 juil. 2008 à 14:13
En fait je dois valider ma saisie pour que l'affichage des personnes se fasse.

J'ai utilisé onchange en espérant en fait que la saisie dans la case recherche mette à jour automatiquement la case résultat (sans avoir à valider ... en live)

   Ex je tape A   tous les noms contenant un A s'affiche

   je continue à taper (toujours sans valider) par exemple B et la liste des personnes affichées se réduit aux personnes dont le nom contient AB

En gros

Tant que page affichée
   Si modification de la case saisie
       mettre à jour résultats
0
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009
29 juil. 2008 à 10:57
... pour l'autocompletion en AJAX

http://www.javascriptfr.com/codes/AUTOCOMPLETION-SIMPLE-IMPLEMENTER_43639.aspx

Merci encore Nickadele
0
Rejoignez-nous