existe t'il une fonction javascript qui permet d'affiche une liste déroulante après

Version imprimable

bonjour à tous !
je souhaitrai avoir une idée qui permet d'avoir une liste de noms de personnes en saisissant juste une lettre dans une zone de texte puis avoir la liste des noms qui contiennent la lettre saisie sur une seule page. ci joint le code qui permet d'afficher la liste déroulante qui contient la lettre saisi dans un champ text nom.
en réalité je cherche une idée meilleure car en ce moment j'affiche cette liste mais dans une autre page. quand je saisie une lettre dans le champ text nom et je fait envoyer puis dans une autre page la liste des noms qui contienne cette lettre s'affiche. voila j'spère que je suis claire.
merci pour toute intervention!
exemple si je saisie a dans la liste j'aurai alice, alexandre
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $nom=$_POST["nom"]; $query="select * from personne where nom_personne like '%$nom%' order by nom_personne ;"; $result=mysql_query($query); $nombrelignes = mysql_num_rows($result); if ($nombrelignes==0) echo"il n'y a pas d'enregistrements"; else {echo "<select name='nompersonne' style='color #FFFFFF; border: 1px solid #81A2CB; background-color: #81A2CB'>"; for ($i=0;$i<$nombrelignes;$i++) { $nom = mysql_result($result,$i,"nom_personne"); echo "<option value=$nom> $nom </option>"; } echo "</select>"; } ?>

08/08/2006, 23h41
XecTech

Citation:

Envoyé par zana74

personne ne me réponds !, allez faites un effort

c'est juste que si tu avais cherché, il existe un tutoriel pour ce que tu veux faire sur ce site... Il t'apprendra à utiliser AJAX

J'ai la solution

Salut !

Je crois avoir la solution à ton problème !

C'est en javascript que j'ai développé un outil comme tu désires afin de pouvoir rechercher facilement les élèves de mon école.

Ce script affiche une zone de texte qui fonctionne comme la barre d'adresse d'internet explorer ! Si on tape une lettre, un tri automatique affiche tout ce qui commence par celle-ci !

voilà mon script :

Code:

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
77
78
<script language="JavaScript" type="text/JavaScript">
tab_eleves = new Array;
tab_eleves_id = new Array;

<?
require('../../connection.inc.php');
/*
Ce formulaire de recherche rapide et intelligente prend ces informations dans la table eleves_po sur 
le serveur H9X (PhpMyAdmin) il rempli la listbox des noms des élèves présents. facilement adaptable 
dans les requêtes, il est simple et efficace.  

Pierre Droz
*/
// **************************** REQUETES SQL ********************************************************
mysql_select_db('eleves_po');
$query_liste = "SELECT * FROM t_lien_eleve_prof WHERE dual=0 AND ref_prof=0 ORDER BY nom_prenom_eleve";
$result_liste = mysql_query($query_liste);
for ($i=0;$i<mysql_num_rows($result_liste);$i++){
echo "\ntab_eleves_id[".$i."] = \"".mysql_result($result_liste,$i,id_eleve)."\"";
echo "\ntab_eleves[".$i."] = \"".mysql_result($result_liste,$i,nom_prenom_eleve)."\"";
}
?>
// ----------------------------- Fonctions du tri-intelligent ----------------------------------------

function tri_intel_select(){ // fonction principale qui appel les 2 autres
	del_select(); // appel del_select (efface tout dans la select box)
	add_select(); // appel add_select  (remet les noms qui commencent par ce qu'on à mis dans la text box)
} // voir fonction ci-dessous

	function del_select(){ // ici commence la fonction del_select
		// supprime toutes les options 
		var tri = document.forms['form_search'].tri;
		var tri_size = tri.options.length;
		for(i=tri_size; i>=0; i--)
		{
			tri.options.remove(i);
		}
	}
	
	function add_select(){ // ici commence la fonction add_select
	
	if (window.event.keyCode == '40'){// si on presse la flèche directionnel bas, on focus sur la listbox (ASCII = 40)
	document.forms['form_search'].tri.focus();
	}
	
	var tri = document.forms['form_search'].tri; 
	var champ = document.forms['form_search'].recherche; // prend les lettres tapées dans textbox
	var champ_size = champ.value.length; // prend la taille du champ tapé
	var tri_size = tab_eleves.length; // prend la longueur de toutes les valeurs du tableau
		for (i=0;i<tri_size;i++){ // parcours tout le tableau
			// met dans "tablo" le nombre de premières lettres tapé dans lea textbox	
			var tablo = tab_eleves[i].substr(0,champ_size); 
			// met dans "champtexte" les lettres tapés dans la textbox
			var champtexte = document.forms['form_search'].recherche.value;
			// Si "tablo"(en minuscules) == "champtexte"(en minuscule)
			if (tablo.toLowerCase() == champtexte.toLowerCase()){
				new_option = document.createElement("OPTION"); // créer une nouvelle option
				// Prend le nom de l'élève qui commence par les lettres tapés
				new_option.text = tab_eleves[i]; 
				// Colle l'id de l'élàve à l'option
				new_option.value = tab_eleves_id[i];
				// Affiche dans la selectbox
				tri.options.add(new_option);
			}
		}
	}
// ------------------------------ Fin des fonctions du tri intelligent ----------------------------------
</script>
<form action="" method="get" name="form_search">
<input name="recherche" type="text" onKeyUp="tri_intel_select()"  size="20"><br>
<select name="tri" size="5">
<script language="JavaScript" type="text/JavaScript">
for(i=0;i<tab_eleves.length;i++){
	document.write("<OPTION>"+tab_eleves[i]+"</OPTION>");
}
</script>
</select>
</form>

Voici les trois fonctions JS qui te permettront d'implémenter aisément ce que tu souhaites :

Code:

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
    function SearchList(htmlselect,htmltext,caseSensitive){ 		
        this.select=htmlselect; 
        this.text=htmltext; 		
        this.allOptions=new Array(); 
        for(i=0;i<this.select.options.length;i++){ 
            this.allOptions[i]=this.select.options[i]; 
        } 
        this.caseSensitive=false; 
        if(caseSensitive) 
            this.caseSensitive=true;         
    } 
 
    /* **********************
    *    Vide le contenu de la liste 
    *****************************/     
    SearchList.prototype.viderListe=function(){ 
        var length=this.select.options.length; 
        for(i=length-1;i>=0;i--){ 
            this.select.options[i]=null; 
        } 
    } 
 
    /* *********************************************
    *    Restore le contenu de la liste avec les valeurs initiales 
    ******************************************************/ 
    SearchList.prototype.restoreListe=function(){ 
        for(i=0;i<this.select.options.length;i++){ 
            this.select.options[i]=null; 
        } 
        for(i=0;i<this.allOptions.length;i++){ 
            this.select.options[i]=this.allOptions[i]; 
        } 
 
    } 
 
    /* **************************************
    *    Met à jour le contenu de la liste en fonction 
    *    du texte saisi dans le champ 
    ******************************************/ 
    SearchList.prototype.MAJList=function(){ 
        var search=this.text.value; 
        if(search=="" || search.length < 1){ 
            this.restoreListe(); 
            return; 
        } 
        else{ 
            this.viderListe(); 
            for(i=0;i<this.allOptions.length;i++){ 
                if(!this.caseSensitive){ 
                    if(this.allOptions[i].text.toUpperCase().indexOf(search.toUpperCase())==0) 
                        this.select.options[this.select.options.length]=this.allOptions[i]; 
                } 
                else{ 
                    if(this.allOptions[i].text.indexOf(search)==0) 
                        this.select.options[this.select.options.length]=this.allOptions[i]; 
                } 
            } 
        }          
    }

Ensuite dans ta page plus qu'à faire :

Code:

1
2
3
4
5
6
7
<INPUT id = 'p_search1' TYPE='text' NAME='search1' SIZE=10 MAXLENGTH=10 onKeyUp='Liste1.MAJList();'>
 
<SELECT id ='p_trait1' ...>
...
</SELECT>
 
echo "<script>var Liste1 = new SearchList(document.getElementById('p_trait1'), document.getElementById('p_search1'),false );</script>\n";

09/08/2006, 10h41
zana74

Citation:

Envoyé par linar009

Voici les trois fonctions JS qui te permettront d'implémenter aisément ce que tu souhaites :

Merci beaucoup, ça ressemble exactement a ce que je souhaite et ça marche impec!

encore merci aux autres de leurs interventions