Merci beaucoup pour ton aide ! vous pouvez tester le code ici :
[ Lien ]et sinon voici le code final :
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function recherche()
{
if (document.getElementById('recherchechamp').value == '')
{
supprContenu();
q =0;
while(document.getElementById('userNom_'+q))
{
var texte = document.getElementById('userNom_'+q).innerHTML
texte = texte.replace(/<strong>/gi,"");
texte = texte.replace(/<\/strong>/gi,"");
document.getElementById('userNom_'+q).innerHTML = texte;
document.getElementById('userHTML_'+q).style.display='block';
q++;
}
}
else
{
texteEntrer();
z =0;
while(document.getElementById('userNom_'+z))
{
texte = document.getElementById('userNom_'+z).innerHTML;
texte = texte.replace(/<strong>/gi,"");
texte = texte.replace(/<\/strong>/gi,"");
document.getElementById('userNom_'+z).innerHTML = texte;
document.getElementById('userHTML_'+z).style.display='block';
textePetit = texte;
textePetit = textePetit.toLowerCase();
rechercheValue = document.getElementById('recherchechamp').value;
rechercheValue = rechercheValue.toLowerCase();
position = textePetit.indexOf(rechercheValue);
if(position != -1)
{
partie1 = texte.substring(0, position);
position2 = position + rechercheValue.length;
partie2 = texte.substring(position,position2);
position3 = texte.length;
partie3 = texte.substring(position2,position3);
texteFinal = partie1 + "<strong>" + partie2 + "</strong>" + partie3;
document.getElementById('userNom_'+z).innerHTML = texteFinal;
texteFinal = '';
position2 = 0;
position3 = 0;
document.getElementById('userHTML_'+z).style.display='block';
}
else
{
document.getElementById('userHTML_'+z).style.display='none';
}
position = 0;
z++;
}
}
return 0;
}
function texteEntrer()
{
document.getElementById('croix').style.display='block';
document.getElementById('recherchechamp').style.borderRight='none';
document.getElementById('recherchechamp').style.width='176px';
}
function changerFond(idUser, etat)
{
if(etat == true) {
document.getElementById('userHTML_'+idUser).style.backgroundColor='#dce1e8';
}
else {
document.getElementById('userHTML_'+idUser).style.backgroundColor='#ffffff';
}
}
function supprContenu()
{
document.getElementById('recherchechamp').value='';
document.getElementById('croix').style.display='none';
document.getElementById('recherchechamp').style.borderRight='1px solid #bdc7d8';
document.getElementById('recherchechamp').style.width='192px';
}
function focusRecherche()
{
document.getElementById('recherchechamp').value='';
document.getElementById('recherchechamp').style.color='#000000';
}
function blurRecherche()
{
document.getElementById('recherchechamp').value='Veuillez sair le nom d\'un ami';
document.getElementById('recherchechamp').style.color='#777777';
}
function cocherDecocher(container_id,state)
{
var checkboxes = document.getElementById(container_id).getElementsByTagName('input');
for (var i=0;i<checkboxes.length;i++)
{
if(checkboxes[i].type == 'checkbox')
{
checkboxes[i].checked = state;
}
}
return true;
}
</script>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
padding-top:200px;
width:100%;
}
#listeAmis {
clear:both;
font-size:11px;
height:114px;
width:198px;
border-top:1px solid #bdc7d8;
border-right:1px solid #bdc7d8;
border-left:1px solid #bdc7d8;
border-bottom:2px solid #bdc7d8;
overflow:auto;
}
#listeAmis strong, #listeAmis STRONG {
background-color:#dce1e8;
font-weight:bold;
}
#listeAmis label {
vertical-align:middle;
padding-bottom:7px;
height:12x;
}
#listeAmis div {
height:19px;
vertical-align:middle;
}
.rechercheAmis {
border-top:1px solid #bdc7d8;
border-right:1px solid #bdc7d8;
border-left:1px solid #bdc7d8;
border-bottom:none;
padding-top:3px;
padding-left:3px;
padding-right:3px;
font-size:11px;
width:192px;
float:left;
height:16px;
color:#000000;
}
#croix {
border-top:1px solid #bdc7d8;
border-right:1px solid #bdc7d8;
border-left:none;
border-bottom:none;
font-weight:bold;
color:#b1bdd6;
font-size:10px;
float:left;
width:11px;
height:16px;
padding-left:5px;
cursor:pointer;
padding-top:3px;
display:none;
}
.bottomForm {
font-size:11px;
width:200px;
text-align:center;
}
.bottomForm input[type=submit] {
color: #f7f7f7;
font-weight: normal;
height:22px;
font-size:11px;
background: #3b5998;
border-top: 1px solid #d9dfea;
border-left: 1px solid #d9dfea;
border-right: 1px solid #0e1f5b;
border-bottom: 1px solid #0e1f5b;
cursor: pointer;
margin-top:2px;
padding: 1px 3px;
}
.formAmis {
margin-left:auto;
margin-right:auto;
width:200px;
}
</style>
<title>Recherche Liste</title>
</head>
<body onload="blurRecherche(); cocherDecocher('listeAmis',false);">
<form action="amis.php" method="post" class="formAmis">
<input OnKeyUp="recherche();" onFocus="focusRecherche();" Onblur="blurRecherche();" name="recherchechamp" id="recherchechamp" value="" class="rechercheAmis" type="text"><div id="croix" onclick="supprContenu(); recherche();"> X </div>
<div id="listeAmis">
<div id="userHTML_0">
<input name="utilisateurEnvoi[]" checked="checked" onclick="changerFond(0,this.checked);" id="user0" value="Marc" type="checkbox">
<label id="userNom_0" for="user0">Marc</label>
<br>
</div>
<div id="userHTML_1">
<input name="utilisateurEnvoi[]" onclick="changerFond(1,this.checked);" id="user1" value="Pierre" type="checkbox">
<label id="userNom_1" for="user1">Pierre</label>
<br>
</div>
<div id="userHTML_2">
<input name="utilisateurEnvoi[]" onclick="changerFond(2,this.checked);" id="user2" value="Paul" type="checkbox">
<label id="userNom_2" for="user2">Paul</label>
<br>
</div>
<div id="userHTML_3">
<input name="utilisateurEnvoi[]" onclick="changerFond(3,this.checked);" id="user3" value="Marie" type="checkbox">
<label id="userNom_3" for="user3">Marie</label>
<br>
</div>
<div id="userHTML_4">
<input name="utilisateurEnvoi[]" onclick="changerFond(4,this.checked);" id="user4" value="Jean" type="checkbox">
<label id="userNom_4" for="user4">Jean</label>
<br>
</div>
<div id="userHTML_5">
<input name="utilisateurEnvoi[]" onclick="changerFond(5,this.checked);" id="user5" value="Anne" type="checkbox">
<label id="userNom_5" for="user5">Anne</label>
<br>
</div>
<div id="userHTML_6">
<input name="utilisateurEnvoi[]" onclick="changerFond(6,this.checked);" id="user6" value="Charles" type="checkbox">
<label id="userNom_6" for="user6">Charles</label>
<br>
</div>
<div id="userHTML_7">
<input name="utilisateurEnvoi[]" onclick="changerFond(7,this.checked);" id="user7" value="Ines" type="checkbox">
<label id="userNom_7" for="user7">Ines</label>
<br>
</div>
</div>
<div class="bottomForm">
<a href="#" onclick="cocherDecocher('listeAmis',true);">Tout cocher</a> - <a href="#" onclick="cocherDecocher('listeAmis',false);">Tout décocher</a>
<br />
<input name="envoyer" type="submit" id="envoyer" value="Envoyer !" />
</div>
</form>
</body>
</html>