Discussion :

[james23]

Bonjour,

Possédant plusieur liste déroulant dans mon formulaire, je souhaiterai savoir comment faire pour que celles-ci permettent une saisie semi-automatique et que l'on puisse faire des saisie dedans. Car lorsque l'on crée une liste déroulante celle-ci ne permet aucune saisie.

Merci d'avance

[jowo]

Bonjour,

Tu parles bien d'une liste de ce type:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<select name="myList1">
  <option value="A">Choix A
  <option value="B">Choix B
  <option value="C">Choix C
</list>

Ce n'est pas posssible en HTML pur. Il faut nécessairement un peu de Javascript.

[james23]

Oui tout a fait une liste de ce type.

Vous ne possèdez pas le code en javascript qui effectue cela?

[imad_eddine]

bonjour,

ça veut dire quoi une saisie semi automatique ?

[james23]

C'est lorsque tu commence a saisir un mot, on voit tout les mot commençant par ce que tu as saisi
Sa fait un peu comme le moteur de recherche google

[james23]

j'ai trouver le probleme il suffit d'utiliser AJAX.

J'ai un autre probleme, celui-ci concerne l'affichage dans un champs.
Je choici un responsable et je voudrai que le numéro de tel de celui-ci soit agrémenter directement dans le champs texte

Voici mon code

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
 
<td><select name = "nomRep" id ="nomRep"style="width : 150px"> 
<%
    DBConnexion dbc_resp = new DBConnexion();
    String sql_nomResp = "SELECT nom_prenom_res FROM resp_chantier";
    ResultSet resultat_nomResp = dbc_resp.recupereRequete(sql_nomResp);
    while(resultat_nomResp.next())
    {
       out.print("<option>"+resultat_nomResp.getString("nom_prenom_res")+"</option>");
   }
    dbc_resp.closeConnexion();
%>
</select></td>
 
<td>
<%      
    if(request.getParameter("nomRep") != null)
   {
      DBConnexion dbc_telResp = new DBConnexion();
      String sql_telResp = "SELECT tel_res FROM resp_chantier";
      sql_telResp = sql_telResp.concat("WHERE nom_prenom_res = "+resultat_nomResp.getString("nom_prenom_res"));
      ResultSet resultat_telResp = dbc_telResp.recupereRequete(sql_telResp);
                                        
      out.print("<input type="text" name="telResp" size="8" maxlength="10" value ="+resultat_telResp.getString("tel_res")+"/>");
 
      dbc_telResp.closeConnexion();
      }
%>
</td>

Merci d'avance

[ElbeDD]

Bonjour,
Pour ton nouveau problème, tu veux utiliser la liste déroulante avec ou sans saisie ?

Je pense qu'il y'a un pb dans ton code:
resultat_nomResp doit poser probleme car tous les enregs ont été lus ("while(resultat_nomResp.next())" )

Le champs téléphone est il saisissable ? (disabled, ou mettre une div)

Dans le cas où tu veux liste déroulante sans saisie:
Remarque)
1)Si "nom_prenom_res" n'est pas la PK (ou au moins un champ indexé) de la table "resp_chantier", tu peux alimenter l'attribut value (de option) avec la PK (ou un champ unique, si PK composée)

2) Dans les 2 cas, penser à gérer les caractères ' (nom de famille avec ce caractère par exemple)
Méthode 1) -Ajax-
Code de la combo:
Sur un evenement (onchange à confirmer) de nomRep, tu appelles une méthode javascript.
Cette méthode lance une requete AJAX pour recuperer la valeur et la mettre dans le input telResp

Méthode 2) -Sans ajax-

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
<select name = "nomRep" id ="nomRep"style="width : 150px" onchange="remplitTel(this)"> 
...
SELECT nom_prenom_res,tel_res FROM resp_chantier
...
String aJs="var tabTelephone=new Array();";
 
while(resultat_nomResp.next())
{
out.print("<option>"+resultat_nomResp.getString("nom_prenom_res")+"</option>");
 
aJs+="tabTelephone['"+resultat_nomResp.getString("nom_prenom_res")+"']='"+resultat_nomResp.getString("tel_res")+"';";
}
%>
</select></td>
<input type="text" name="telResp" disabled size="8" maxlength="10" value ="" />
<script language="javascript">
<%=aJs%>
 
function remplitTel(selNomRep){
	var nomResp=selNomRep.value;
	var telResp=tabTelephone[nomResp];
	document.getElementById('telResp').value=telResp;
 
}
 
</script>

J'ai pas pu vérifier mon code mais je ne dois pas être trop loin (onchange à confirmer, pb du caractère ').


Dans le cas avec saisie, il faut plus s'inspirer de la méthode 1

Cordialement

[james23]

Merci pour ton aide.
En ce qui concerne ton code, le numéro de tel ne s'affiche pas dans l'input
il me dit toujours undifined

Pour ce qui est de la saisie, je voulais que l'input ou est affiché les telephones soit sans saisie donc cela et regler. Mais pour la liste déroulant ou il y a les nom des resp, je voulais que se fasse avec saisie mais juste comme google. C'est a dire que quand la personne comme a taper le debut d'un resp, ça affiche tous les resp correspand a ce que la personne a taper. J'ai jeter un petit coup d'oeil pour faire cela, j'ai entendu dire qu'il fallais le faire avec AJAX et utilisé "Autocompleter" mais je comprend pas trop comment l'utilisé.

[ElbeDD]

Bonjour,
"Mais pour la liste déroulant ou il y a les nom des resp, je voulais que se fasse avec saisie mais juste comme google." ==> C'est bien ajax qu'il faut utiliser

Autocompleter: Il existe des librairies. Tu pourrais utiliser "script aculo us" (http://wiki.github.com/madrobby/scri...-autocompleter)
Il existe d'autre ( peut etre mieux, tu pourra étudier selon tes besoins)

Ne pas oublier d'incure les JS (à deposer, chemin dans balisesrc)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<script LANGUAGE="JavaScript" src="prototype/prototype.js"></script>
<script LANGUAGE="JavaScript" src="scriptaculous/scriptaculous.js"></script>

Rajoute le code CSS proposer sur le lien précédant.
Puis code le JSP à afficher:

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
 
 
<td><input type="text" id="nomRep" name="nomRep"/>
<div id="nomRep_choices" class="autocomplete"></div>
</td>
<td>
<input type="text" name="telResp" disabled size="8" maxlength="10" value ="" />
 
<script language="javascript">
new Ajax.Autocompleter("nomRep", "nomRep_choices", "/localhost/tonAppli/ServletAjax1", {
	paramName: "value",
	minChars: 1,
});
 
</script>
</td>

Créer une nouvelle servlet ServletAjax1 qui :
-> Recupérer ce qui a été saisi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

String nomRes= (String) currentParam.getParameter("value");

-> Fait un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"SELECT nom_prenom_res FROM resp_chantier WHERE nom_prenom_res like '"+nomRes+"%'

-> Boucle sur les resultats en écrivant dans une chaine (chaineOL), par exemple (Si DUPO saisi, et 2 enregs correpondant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<ul>
<li>DUPONT Claude</li>
<li>DUPOND Marcel</li>
</ul>

-> Ecriture du résultat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
java.io.PrintWriter out = res.getWriter();
out.println(valeur);
out.flush();
out.close();

Pour alimenter directement le champs Telephone, il te faudra également faire de l'Ajax sur l'évenement HTML: sortie du champs. Mais je pense que tu devra écrire un peu plus de code. Par conséquent, regarde d'abord l'automplete (si je suis pas clair, je pense que tu trouveras des docs sur le web).
Cordialement,