Adapter un script

Hello,

J'ai une messagerie sur mon site Internet. Elle est en AJAX, quand une personne commence a taper un nick, une liste apparaît avec les concordances trouver dans une base de données MYSQL avec PHP.

J'ai eu la demande d'écrire le même message, mais à plus d'une personne à la fois. Du même genre que la messagerie FACEBook.

Je me demandais si certain d'entre vous êtes en mesure de me donner un coup de main.

J'ai cherché sur le WEB et je n'ai rien trouvé pour me satisfaire.

Voici mon code afin de vous permettre de m'aider

Le JavaScript situé dans l'en-tête de mon fichier .PHP

<script type="text/javascript">
<!--
function listUsers() {
Fond = document.getElementById("fond");
To = document.getElementById("to");
Val = document.getElementById("to").value;
List = document.getElementById("listNickname");
Envoi = document.getElementById("envoi");
if (Val != "" && Val != " ") {
Fond.style.display = "block";
List.style.display = "block";
List.innerHTML = "";
Envoi.style.visibility = "hidden";

var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("POST", "users.php", true); // nom de la page important pour le test
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4 && xhr_object.status == 200)
eval(xhr_object.responseText);
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "v="+Val+"&div=listNickname";
xhr_object.send(data);
} else {
Envoi.style.visibility = "visible";
List.innerHTML = "";
List.style.display = "none";
Fond.style.display = "none";
To.value = "";
}
}
function leChoix(Val) {
document.getElementById("to").value = Val;
document.getElementById("fond").style.display = "none";
document.getElementById("listNickname").style.display = "none";
document.getElementById("envoi").style.visibility = "visible";
document.getElementById("object").focus();
}
//-->
</script>

Mon formulaire :

<form name="message" id="message" action="nouveaumessage.php?ID=<?php echo $_SESSION['id_users']; ?>" method="POST" enctype="multipart/form-data">
<table class="tableForm">
<?php if ($mess_err != '') { ?>
<tr><td class="erreur" colspan="2"><b><font color="#FF0000"><?php echo $mess_err; ?></font></b></td></tr>
<?php } ?>
<tr><td>De :</td><td><?php echo stripslashes($_SESSION['nickname_users']); ?></td></tr>
<tr><td>A :</td>
<td>
<div id="divTo">
<input type="text" name="to" id="to" value="<?php echo stripslashes($to); ?>" onkeyup="listUsers();" />
</div>
</td>
</tr>
</table>
<div id="listNickname"></div>
<table class="tableForm">
<tr><td>Sujet :</td><td align="left"><input type="text" name="object" id="object" value="<?php echo stripslashes($object); ?>" /></td></tr>
<tr><td colspan="2"><textarea name="message" cols="70" rows="10"><?php echo $message; ?></textarea></td></tr>
<tr><td colspan="2"><input type="submit" class="envoi" id="envoi" name="btEnvoyer" value="Envoyer" /></td></tr>
</table>
</form> 
 

Mon fichier users.php

<?php
require_once('../Connections/ConnexionBougeotte.php');
mysql_select_db($database_LaBougeotte, $LaBougeotte);
$query = "SELECT nickname FROM usagers WHERE nickname like '%".$_POST["v"]."%'";
$query .= " ORDER BY nickname";
$result = @mysql_query($query);

echo 'var d = document.getElementById("'.$_POST["div"].'");';

while($r = mysql_fetch_array($result))
echo 'd.innerHTML += "<div onclick=\"leChoix(this.innerHTML)\" style=\"cursorointer\">'.$r["nickname"].'</div>";';

?> 
 

Le CSS :

<style>
body {
font: 100% Arial;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color:#FFFFFF;
}
.oneColFixCtr #container {
width: 1050px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
/*border: 1px solid #000000;*/
text-align: center; /* this overrides the text-align: center on the body element. */
padding-right:5px;
padding-left:5px;
}
.oneColFixCtr #mainContent {
padding: 0 0 0 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}


.tableContainer {
width:1000px;
margin: 0 auto;
border:4px solid #000000;
text-align:center;
}
.tableContainer tr td {
border:1px solid #000000;
padding:5px;
}
.tableContainer tr td.tdRouge {
border:0;
background:#990000;
}
.tableMain {
width:1000px;
text-align:center;
}
.tableMain tr td {
border:0;
}
.tableMain tr td.tdMainL {
width:200px;
vertical-align:top;
}
.tableMain tr td.tdMainC {
vertical-align:top;
width:100%px;
text-align:center;
}
.tableMain tr td.tdMainR {
width:165px;
vertical-align:top;
}
.tableForm {
margin:0 auto;
width:100%;
}
.tableForm tr td.erreur {
border:0;
text-align:center;
}
.tableForm tr td {
width:40px;
text-align:left;
/*vertical-align:top;*/
}
.tableForm tr td td {
width:310px;
text-align:left;
}
.tableForm tr td input {
width:310px;
/*border-top:2px solid #777777;
border-left:2px solid #777777;
border-right:2px solid #BBBBBB;
border-bottom:2px solid #BBBBBB;*/
}
.tableForm tr td textarea {
width:700px;
/*border-top:2px solid #777777;
border-left:2px solid #777777;
border-right:2px solid #BBBBBB;
border-bottom:2px solid #BBBBBB;*/
}
.tableForm tr td input.envoi {
width:75px;
margin-left:250px;
margin-right:10px;
}
#fond {
/* position:absolute;top:0;left:0;width:100%;height:100%;display:none; */
position:absolute;top:0;left:0;width:100%;height:100%;z-index:201000;display:none;
}
#divTo {
position:relative;
/* z-index:200; */
z-index:201200;
}
#listNickname {
/*
position:absolute;width:305px;max-height:150px;overflow:auto;left:50%;margin-left:-89px;
background-color:#BBBBBB;padding-left:10px;text-align:left;border:2px solid #888888;display:none;
*/
position:absolute;width:305px;max-height:150px;overflow:auto;left:50%;margin-left:-125px;z-index:201300;
background-color:#BBBBBB;padding-left:10px;text-align:left;border:2px solid #888888;display:none;
}
</style>
 

Alors je crois que tout est là, si vous avez des questions, je suis disponible pour vous répondre.

MErci
Sylvain