Javascript et Recherche dans un fichier XML

Invité · 03/02/2007, 17h02

Bonjour,

Je souhaite effectuer une recherche dans un fichier xml avec le langage javascript en utilisant DOM.

Le principe est le suivant.

A partir d'un formulaire dans une page web.
Je choisis le type de ma rechercher "Marque, Modele, ou couleur" puis je rentre la donnee Rechercher (exemple : "vert") je clique sur le bouton Rechercher. Le bouton Rechercher lance un script javascript qui parcours mon fichier XML en utilisant DOM, et affiche les résultats de la recherche dans la page web (exemple : sous la forme d'un tableau ou liste...)

Je dispose d'un fichier XML, Un fichier HTML, je dois creer un fichier Javascript pour répondre a ce probleme.

Fichier garage.xml

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
 
<garage>
  <voiture>
    <marque>Renault</marque>
    <modele>Cliot</modele>
    <couleur>Rouge</couleur>
  </voiture>
  <voiture>
    <marque>Renault</marque>
    <modele>Megane</modele>
    <couleur>Vert</couleur>
  </voiture>
  <voiture>
    <marque>Peugeot</marque>
    <modele>206</modele>
    <couleur>Vert</couleur>
  </voiture>
</garage>

Fichier garage.html

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Garage</title>
<script language="javascript" src="garage.js"></script>
 
</head>
 
<body>
<h1>Consultation de la base de donnees du garage</h1>
<form id="form1" name="form1" action="">
  <table width="499" border="0">
    <tr>
      <td><strong>Type de recherche </strong></td>
      <td>
          <input name="ElementRechercher" type="radio" value="marque" checked="checked" />Marque<br />
          <input type="radio" name="ElementRechercher" value="modele" />Modele<br />
          <input type="radio" name="ElementRechercher" value="couleur" />Couleur</td>
    </tr>
    <tr>
      <td><strong>Rechercher </strong></td>
      <td><input type="text" name="DonneeRechercher" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="Rechercher" value="Rechercher" /></td>
    </tr>
  </table>
</form>
<p>&nbsp;</p>
<hr />
<p>R&eacute;sultat de la recherche :</p>
<p>&nbsp; </p>
<hr />
</body>
</html>