Filtrage de recherche

Fermé
Aaymeric Messages postés 78 Date d'inscription jeudi 29 septembre 2011 Statut Membre Dernière intervention 7 octobre 2018 - 7 avril 2015 à 15:33
Bonjour tout le monde !
J'ai suivi le tuto video de ce site: http://www.grafikart.fr/tutoriels/jq...zzy-search-314. 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
<!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:
(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 !