Faire une recherche malgre les "show/hide"

**getrude** · 29/06/2012, 12h55

Bonjour 'a tous!
Je ne suis pas sure que ce que je veux faire soit faisable, et j'ai cherche un peu du cote de javascript et jquery, mais mes faibles connaissances me poussent 'a vous demander conseil.

J'ai un HTML, genere par DOM, qui est assez volumineux (des milliers de donnees) et se presente comme ceci:

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
<body>
	<div class="message">
		<h2>message 67934</h2>
		<h3>Version 7</h3>
		<p class="message_desc">Description</p><br/>
	</div>
	<div id="wrapper">
		<div class="group">
			<a href="#" class="info">descr: 
				<span>blablabla informations</span>
			</a><br/>
			<div class="segment">
				<a href="#" class="info">DateInformation
					<span>date informations blablabla</span>
				</a>
				<a href="#" class="show_hide">show/hide</a>
				<div class="slidingDiv">Location : 
					<span class="data">
						<span class="attribute">place:</span>
						<strong> Milan </strong><br/>
					</span>
				<div class="composite">
					<a href="#" class="info">companyIdent
						<span>Company Identification</span>
					</a>
					<a href="#" class="show_hide">show/hide</a>
					<div class="slidingDiv">
						<span class="data">
							<span class="attribute">data1:</span>
							<strong> data </strong><br/>
						</span>
						<span class="data">
							<span class="attribute">data2:</span>
							<strong> data </strong><br/>
						</span>
					</div>
				</div><br/>
etc.

et la fonction: (je n'y connais rien en js, je l'ai trouvee sur le net, avant toute remarque

)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
			$(".show_hide").show();
			$(".slidingDiv").hide();
 
		$(".show_hide").click(function(){
			$(this).next("div").slideToggle();
		return false;
		});
 
	});
</script>';

J'ai donc des show/hide qui permettent de montrer ou cacher ce qui se trouve entre les balises div. par defaut, tout est cache.
(J'ai essaye de faire les show/hide d'une autre maniere, avec des ID, mais je ne m'en sors pas...)

Ce que j'aimerais, c'est permettre de faire une recherche, un peu comme ctr+f, avec une zone de texte en haut, et qu'elle ouvre toutes les balises contenant le mot recherche'. Est ce qu'il y aurait un moyen de faire ca et si oui, est ce simple?
Merci d'avance!

**SpaceFrog** · 29/06/2012, 13h17

Il s'agit de JQuery

les selecteurs:

$('.classname') pour selectionner sur la classe
$('#idElt') pour selectionner sur l'id

Attention un id doit être unique sur la page

**Bovino** · 29/06/2012, 13h46

Pourquoi mets-tu des antislash pour échapper les quotes dans ton code ???

**getrude** · 29/06/2012, 14h13

ah oui, j'ai modifie ca ce n'etait pas la fonction originale de mon code.

Spacefrog, pour resumer il faut que je mette un id different pour chaque div? il y en aura des centaines et je ne sais pas si c'est tres propre, si? donc je genere un id different pour chaque div, je stocke toutes les donnees dans un tableau id=>donnees, je fais une recherche la dedans d'apres la requete jquery, et ca m'ouvre l'id correspondante? (bon j'imagine que ce n'est pas du tout ca :/)

precision: je ne peux pas faire de liste de mes donneees 'a l'avance

**bmartin** · 29/06/2012, 16h10

Salut,

Il faut que l'élément racine ai au moins un id.
Dans ta fonction de recherche tu boucle jusqu’à trouver ton texte recherché puis avec "parentElement" tu remonte de noeud en noeud pour changer la classe jusqu'à atteindre la div racine.

Bon courage

**SpaceFrog** · 29/06/2012, 16h14

il y en aura des centaines et je ne sais pas si c'est tres propre, si?

ben propre ou pas tu n'as pas le choix ! in id doit être unique sur la page
donc soit tu incrémentes l'id genre id="myid_1" , id="myid_2"soit tu passes par le classname et tu comptes sur la puissance des selecteurs de jquery afin de cible l'élément voulu

Faire une recherche malgre les "show/hide"

jQuery

Vue hybride

Discussions similaires

Partager

Partager