Discussion :

[noboxstyle]

Bonjour à tous !

Alors voilà, j'essaie de créer un annuaire et j'aimerais afficher les éléments de mon tableau d'objet de sorte à ce que chacun soit à la ligne dans ma page html, genre :
NOM : Dora
adresse mail : @coucou
statut : Ami.

Et que l'ensemble soit dans des input différents ou des boites quoi (mais ca je pense qu'une fois qu'ils seront chacun à la ligne je reussirai à le faire avec le CSS.

VOici un bout de code JS :

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
//
************************************
//  RECHERCHER CONTACT
//*************************************
 
function rechercher() {
    recherche = $recherche.value;
    elements = " ";
    for (i = 0; i < contacts.length; i++) {
        if (contacts[i].prenom == recherche || contacts[i].nom == recherche || contacts[i].numero == recherche || contacts[i].mail == recherche || contacts[i].statut == recherche) {
            elements += "<li>" + texteContact(contacts[i]) + "</li>";
        }     
    }
    $resultats.innerHTML = elements;
} // fonction principale

Et le bout de code html

Code :

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

1
2
3
4
5
6
7
8
 
<div class="recherche">
<h3 id="RechercherContact"> Rechercher un contact</h3>
   <center> <input id="recherche" placeholder="Recherche" /></center>
   <center> <button id="rechercher">Rechercher</button> </center>
</div>
 
<ul id="resultats" id="effacer"></ul>

[autran]

OK mais dis nous ce que tu obtiens et en quoi ça diffère de ce que tu veux.
Sinon on risque de croire que tu as photocopié des bouts de code sur internet et que tu attends un résultat tout fait.

Mais rapidement :
Pourquoi utilises tu $recherche, tu mélanges avec PHP, alors que

Code javascript :

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

document.getElementById("recherche");

suffit
Je suppose que contacts est un tableau, il sort d'où?

Poste nous un code suffisamment autonome pour que l'on puisse le tester et te le debugger

[noboxstyle]

Hop voici le code total de JS !
En fait ca m'affiche le contact avec son nom son mail et son numero en ligne dans un seul <li> alors que je voudrais que ca fasse :
-nom
-mail
-numero
par exemple ! En gros que le contenu de mon tableau d'objet soit vertical.

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
77
78
79
80
81
82
 
 
//************************************
//  CONTACT TABLEAU D'OBJET
//*************************************
contacts = [{}];
 
//************************************
//  CE QUE L'ON VA ENREGISTRER 
//*************************************
function texteContact(contact) {
  return  contact.nom.toUpperCase() + " " + contact.mail + " "  +" (" + contact.numero + ")" + " " + contact.statut;
}
 
//************************************
//  AFFICHER CONTACT
//*************************************
function afficherListe() {
    elements = "";
    for (i = 0; i < contacts.length; i++) {
        elements += "<li>" + texteContact(contacts[i]) + "</li>";
    }
    $liste.innerHTML = elements;
}
 
//************************************
//  AJOUTER CONTACT
//*************************************
function ajouter() {
    contacts.push({
        nom: $nom.value,
        numero: $numero.value,
        mail: $mail.value,
        statut: $statut.value
    });
if ($nom.value == "") {
alert("Veuillez entrer un Nom de contact s'il vous plait !");
}
else if ($nom.value != "") {
    alert("Vous avez bien ajouté " + " " + $nom.value + " " + "à vos contacts !");
}
else { 
alert("Vous avez bien ajouté ce contact"); 
}
}
//************************************
//  RECHERCHER CONTACT
//*************************************
function rechercher() {
    recherche = $recherche.value;
    elements = " ";
    for (i = 0; i < contacts.length; i++) {
        if (contacts[i].prenom == recherche || contacts[i].nom == recherche || contacts[i].numero == recherche || contacts[i].mail == recherche || contacts[i].statut == recherche) {
            elements += "<li>" + texteContact(contacts[i]) + "</li>";
        }     
    }
    $resultats.innerHTML = elements;
} // fonction principale
 
 
//************************************
//  AFFICHER TOUS LES RESULTATS
//*************************************
function listerTout () {
    toutContact = $recherche.value;
elements = " ";
for (i = 0; i < contacts.length; i++) {
        if (contacts[i].prenom == toutContact || contacts[i].nom == toutContact || contacts[i].numero == toutContact || contacts[i].mail == toutContact || contacts[i].statut == toutContact) {
            elements += "<li>" + texteContact(contacts[i]) + "</li>";
        }     
    }
    $result.innerHTML = elements;
} // fonction principale
 
 
//****************************************************
//  LA FONCTION DE DE CLIC SUR LE BOUTON POUR AJOUTER 
//****************************************************
$ajouter.onclick = ajouter;
$rechercher.onclick = rechercher;
$listerTout.onclick = listerTout;
afficherListe();

[autran]

tu as le HTML qui se mange avec ?

[noboxstyle]

Si si !
J'ai le html qui se digère avec en effet !!
Par la même occaz, je vais essayer de lier le tout à une base de donnée en Php. J'ai déjà codé le systeme de log et là je suis aussi en quete pour lier les donnée entrantes de JS sur ma base Mysql.
En fait j'ai les 2 problèmes là que j'essaie de resoudre depuis 2 semaines !

Code html :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
 
<html>
 
<head>
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
    <title>L'annuaire client</title>
</head>
 
 
<body onload="initialize()" data-spy="scroll" data-target=".navbar">   <!-- DEBUT DU BODY -->
 
 
    <!-- ******************************
         LA BARRE DE NAVIGATION NAVBAR
	 ******************************  -->
    <div class="container-fluid">
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle">
              <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">UnForgetMe</a>
                </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#unforgetme">Accueil</a>
              </li>
              <li><a href="#AjoutClient">Ajouter un contact</a>
              </li>
                        <li><a href="#RechercherContact">Recherche d'un contact</a>
                        </li>
              <li><a href="#ListerContact">Lister un contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
 
 
 
 <!-- ******************************
         LE HEADER
 ***********************************  -->
 
<header id="unforgetme">
<h1> Unforget-Me ! </h1>
<p> Unforget-Me est un annuaire en ligne qui permet de ne plus jamais perdre les coordonnées de ses amis ! Que ce soit un contact professionnel, amical, familial, n'ayez plus peur de casser votre téléphone ! Tout  </p>
</header>
 
 
 <!-- ******************************
         LE MAIN
 ***********************************  -->
 
<main>
 
 
 <!-- ******************************
       l'ajout de client + + option 
 ***********************************  -->
<h3 id="AjoutClient"> Ajouter un Contact </h3>
<div class="ajout"><center>
    <input id="nom" placeholder="Nom / Prénom" />
    <input id="numero" placeholder="Numéro de téléphone" />
    <input id="mail" placeholder="Mail" />
  <select id="statut" name="statut">
<option>Famille</option>
<option>Professionnel</option>
<option>Amis</option>
<option>Connaissance</option>
<option>Autre</option>
</select> </center>
    <center><button id="ajouter">Ajouter</button></center>
</div>
 
 
 <!-- ******************************
      la recherche client + affichage
 ***********************************  -->
 
<div class="recherche">
<h3 id="RechercherContact"> Rechercher un contact</h3>
   <center> <input id="recherche" placeholder="Recherche" /></center>
   <center> <button id="rechercher">Rechercher</button> </center>
</div>
 
<ul id="resultats"></ul>
 
 
 <!-- ******************************
      Affichage de tous les contacts
 ***********************************  -->  
<h3 id="ListerContact"> Accès à l'ensemble des contact </h3>
 
 
    <center><button id="listerTout">Lister</button> </center>
 
 
<ul id="result"></ul>
 
</main>
 
 
 
 <!-- ******************************
        INCLUSION FICHIER JAVASCRIPT
 ***********************************  -->
    <script src="annuaire.js" type="text/javascript"></script>
 
<!-- INSERTION JQUERY POUR LA NAVBAR-->
<script src="bootstrap/js/scrollmovement.js"></script>
<script src="bootstrap/js/addheight.js"></script>
 
</body>
 
</html>

[NoSmoking]

Bonjour,

En fait ca m'affiche le contact avec son nom son mail et son numero en ligne dans un seul <li> alors que je voudrais que ca fasse :
-nom
-mail
-numero
par exemple !

c'est quand même ce que tu lui demande quelque part...

Code :

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

1
2
3
function texteContact(contact) {
  return  contact.nom.toUpperCase() + " " + contact.mail + " "  +" (" + contact.numero + ")" + " " + contact.statut;
}

formate ta sortie pour obtenir une DL (définition liste) par exemple

Code html :

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

1
2
3
4
5
<dl>
    <dt>contact.nom</dt>
    <dd>contact.mail</dd>
    <dd>contact.statut</dd>
</dl>

Le CSS fera la suite.