Image en auto-complétion
Bonjour, sur mon site j'aimerais faire un champ de texte en auto-complétion qui affiche le nom/prénom de la personne cherchée, mais aussi sa photo. Alors j'ai écris ça :
<input type="text" placeholder="recherche" id="recherche"></input>
<?php
$reqC = $bdd->query('SELECT Nom, Prenom, Photo FROM users');
$data = array();
while ($row = $reqC->fetch(PDO::FETCH_NUM)) {
array_push($data,''.$row[0].' - '.$row[1] . ' - <img src="'.$row[2].'"/>');
}
?>
<script language="javascript">
<?php
$js_array = json_encode($data);
echo "var liste = ". $js_array . ";\n";
?>
$('#recherche').autocomplete({
source : function(req, resp) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var match = new RegExp( "^" + re, "i" );
var a = $.grep(liste, function(item,index){
return match.test(item);
});
resp(a);
},
minLength : 3
});
</script>
Mais le <img src="'.$row[2].'"/> m'affiche littéralement ce qui est écrit, et pas la photo. Mais sinon l'auto-complétion fonctionne bien. Voyez-vous une solution ?
Merci d'avance !
<input type="text" placeholder="recherche" id="recherche"></input>
<?php
$reqC = $bdd->query('SELECT Nom, Prenom, Photo FROM users');
$data = array();
while ($row = $reqC->fetch(PDO::FETCH_NUM)) {
array_push($data,''.$row[0].' - '.$row[1] . ' - <img src="'.$row[2].'"/>');
}
?>
<script language="javascript">
<?php
$js_array = json_encode($data);
echo "var liste = ". $js_array . ";\n";
?>
$('#recherche').autocomplete({
source : function(req, resp) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var match = new RegExp( "^" + re, "i" );
var a = $.grep(liste, function(item,index){
return match.test(item);
});
resp(a);
},
minLength : 3
});
</script>
Mais le <img src="'.$row[2].'"/> m'affiche littéralement ce qui est écrit, et pas la photo. Mais sinon l'auto-complétion fonctionne bien. Voyez-vous une solution ?
Merci d'avance !
3 réponses
-
ModérateurA la place de mettre de ' pour ta chaine, mets des ".
sinon, concatène la chaine 'Machaine1'.$Variable.'Machaine2'
-
Je suis désolé, je ne comprends pas vraiment ce que tu veux dire, comment tu écrirais cette ligne :
array_push($data,''.$row[0].' - '.$row[1] . ' - <img src="'.$row[2].'"/>');
si c'est bien sur cette ligne que tu voyais les modifications -
Re-bonjour, j'ai beau faire tous les tutos que je trouve à propos de l'autocomplétion qui renvoie des images, mais ça ne marche toujours pas ! Alors j'ai essayé ça :
<input type="text" placeholder="Trouver des amis" id="recherche"></input>
<?php
$reqC = $bdd->query('SELECT Nom, Prenom, Photo FROM users');
$data = array();
while ($row = $reqC->fetch(PDO::FETCH_NUM)) {
array_push($data, ''.$row[2].'');
}
?>
<script language="javascript">
<?php
$js_array = json_encode($data);
echo "var liste = ". $js_array . ";\n";
?>
$('#recherche').autocomplete({
source : function(req, resp) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var match = new RegExp( "^" + re, "i" );
var a = $.grep(liste, function(item,index){
var inner_html = '<img src="' + item + '">';
return inner_html;
});
resp(a);
},
minLength : 2
});
</script>
Mais avec le return basique, ça me renvoie toujours ça comme un String. Donc ici, ça renvoie ce que contient inner_html, et pas l'image que je voudrais...
Si quelqu'un voit comment faire fonctionner cela, je suis preneur !
Merci d'avance !
