Filtrage de recherche

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:

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:

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 !

Code:

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

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