Filtrage de recherche

**Aaymeric91** · 07/04/2015, 14h55

Bonjour tout le monde !
J'ai suivi le tuto video de grafikar. Je l'ai correctement suivi et j'ai fait une page de texte mais il n'y a absolument rien qui me parait faux ou incorrecte et j'ai mis le bon id et class aux bons endroits. Pouvez vous jetez un petit coup d'oeil et me dire ce qu'il cloche ?

index.php

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		 <style type="text/css">
                        .highlighted{backgound-color: red; color: blue;}
                </style>
	</head>
	<body>
		<input type="text" name="category" id="categoryFilter" placeholder="Trouver une catégorie">
		<ul id="filter">
			<li><span>Alain</span></li>
			<li><span>catherine</span></li>
			<li><span>Amaury</span></li>
			<li><span>Aymeric</span></li>
			<li><span>Laetitia</span></li>
			<li><span>Bon papa</span></li>
			<li><span>Mimi</span></li>
			<li><span>Nico</span></li>
		</ul>
		<script type='text/javascript' src='jquery.js'></script>
		<script type='text/javascript' src='appfilter.js'></script>
	</body>
</html>

Et mon 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
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
 
(function($){
	$('#categoryFilter').focus().keyup(function(event){
		var input = $(this);
		var val = input.val();
		if (val == ''){
			$('#filter li').show();
			$('#filter span').removeClass('highlighted');
			return true;
			}
		var regexp = '\\b(.*)';
		for (var i in val){
			regexp += '('+val[i]+')(.*)';		
		}		
		regexp += '\\b';
		$('#filter li').show();
		$('#filter').find('a>span').each(function(){
			var span = $(this);
			var resultats = span.text().match(new RegExp(regexp, 'i'));
			if(resultats){
				var string = '';
				//A mettre dans la page php un css 
				// <style type="text/css">
				// .highlighted{backgound-color: red; color: blue;}
				for(var i in resultats){
					if(i > 0){
						if(i%2 == 0){
							string += '<span class=""highlighted>'+resultats[i]+'</span>';
						} else {
							string += resultats[i];
						}
 
					}
				}
				span.empty().append(string);
			} else {
				span.parent().parent().hide();
			}
		});
	});
})(jQuery);

Merci pour votre aide !

**Darkaurora** · 08/04/2015, 16h23

Code :

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

1
2
3
$('#filter').find('a>span').each(function(){
....
}

Je n'ai vu aucun élément <a> comme enfant de #filter, il y a déjà un problème à cet endroit. Change avec 'a>span' par 'li>span' et je te conseil de regarder attentivement les sélecteurs CSS sur lesquels s'appuie jQuery:

http://www.w3schools.com/cssref/css_selectors.asp

**Aaymeric91** · 08/04/2015, 17h19

Ca va ok je vais regarder ca, je te tiens au courant et merci

Filtrage de recherche

jQuery

Vue hybride

Discussions similaires

Partager

Partager