Bonsoir, j'ai un input/text couplé avec ajax, qui permet de chercher dans la base de donnée les membres, suivant les caractères qu'on entre dans l'input. Ça c'est bon, j'ai trouvé un bon tutoriel, qui m'a permis de réalisé ceci. Ce que j'aimerais réaliser, et peut être un peu complexe, je ne saurais dire...

Lorsque des membres sont trouver dans la liste déroulante, qu'on puisse en cliquant sur le pseudo qu'on puisse les ajouter dans une div, et bien sur on ne peut l'ajouter qu'une fois. Puis dans cette div, je veux affiché les pseudo horizontalement avec une petite image à coté qui les enlèvera, c'est div doit fonctionner comme un textarea pour le traitement php <?php $_POST['machin'];?> . Il me semble que j'ai vus ça, il y a bien longtemps dans un tutoriel mais pas moyens de retrouvé ça où peut être quelque chose qui y ressembler. J'en suis sur.

Voici une représentation de ce que je veux faire :



Merci, d'avance pour aide.

Si tu as réussi à envoyer une requête ajax avec la valeur de l'input en paramètre, tu n'auras aucun problème pour passer le contenu du div. C'est exactement pareil sauf que là tu utilises innerHTML.

Je n'ai pas compris ce que vous voulez dire... Voici un code source, que j'ai trouvé sur internet :

//Recherche les membres dans la table

function showResult(str)
{
if (str.length==0)
  {
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";    
	
    }
  }
xmlhttp.open("GET","ajax_recherche_membre.php?q="+str,true);
xmlhttp.send();
}

Est sa s'utilise comme ça :

<span class="cherche_membre_textarea">
<form>
<strong>Rechercher un/des membre(s)</strong><br />
<input type="text" size="30" onkeyup="showResult(this.value)" />
<span id="livesearch"></span>
</form>
</span>

quand t'a ajax_recherche_membre.php, ce n'est que des requêtes à la BDD.

Je ne sais pas trop comment procéder pour faire ceci... merci, d'avance.

Je ne vais pas t'écrire le code. Si tu réfléchis un peu et pose des question j'y répondrai avec plaisir, mais essaie au moins de comprendre comment ça marche et de dire à quel endroit tu bloques, parce que là ton post se limite à "je veux faire ça, merci".

J'ai pas demandé à ce qu'on me le code pour moi, ce serait trop facile j'ai juste demander une marche à suivre pour commencer le codage, je ne savais pas trop par ou commencer. J'ai fais quelque truc, qui commence à prendre forme, mais c'est du grand n'importe quoi

J'ai réussis à implanté les options que je clic dans la liste, pour les mettre dans un textarea est dans une div. Ça sa marche bien. Mais, si je clic sur 1 pseudo sa me met bien pseudo + image, met si je clic sur 2 pseudo sa me met pseudopseudo + image, l'image n'est pas répéter, est les pseudo sont collés les un aux autres.

function insertTag(startTag, textareaId) {

        var field  = document.getElementById(textareaId); 
        var scroll = field.scrollTop;
        field.focus();
        
        /* === Partie 1 : on récupère la sélection === */
      if (window.ActiveXObject) {
                textRange.text = startTag + currentSelection + endTag;
                textRange.moveStart("character", -endTag.length - currentSelection.length);
                textRange.moveEnd("character", -endTag.length);
                textRange.select();     
        } else {
                var startSelection   = field.value.substring(0, field.selectionStart);
                var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
                var endSelection     = field.value.substring(field.selectionEnd);               
        }
        
        
        /* === Partie 3 : on insère le tout === */
        if (window.ActiveXObject) {

                textRange.select();     
				// document.getElementById("test_test").innerHTML = textRange.select(); 
				
        } else {
                field.value = startSelection + startTag + currentSelection + endSelection;
                field.focus();
                field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);

document.getElementById("test_test").innerHTML = (' ' + field.value + ' <img src="design/images/annuler.png" id="enlever_membre" title="Enlever le membre ' + field.value + '"><br />'); //On a joute dans la div
		
		} 

        field.scrollTop = scroll;     
}

<fieldset><legend> machin </legend>

<select onchange="insertTag('' + this.options[this.selectedIndex].value + '', 'textarea');">
<option disabled="disabled" selected="selected">Votre recherche :</option>

<option value="Membre 1">Membre 1</option>
<option value="Membre 2">Membre 2</option>
<option value="Membre 3">Membre 3</option>
</select>

<span class="cherche_membre_textarea">
<form>
<strong>Rechercher un/des membre(s)</strong><br />
<input type="text" size="30" onkeyup="showResult(this.value)" />
<span id="livesearch"></span>
</form>
</span>

<textarea name="textarea" id="textarea" rows="6" cols="30" disabled="disabled"/>
<!--Ici sont rentrés les pseudo cliqués dans la liste-->
</textarea>
<div id="test_test">
<!--Ici sont rentrés les pseudo cliqués dans la liste-->
</div>
</fieldset>

Le fonctionnement de mon script est très simple, de la liste déroulante, on doit pouvoir ajouté qu'une seule fois le pseudo si, il est insérer dans la div, est en cliquant sur l'image qui seront assignés à chaque pseudo, on peut l'enlever. C'est ça, que je n'y arrive pas.