Discussion :

[almoha]

Bonjour,

J'utilise l'autocomplete jquery ui. Je souhaite rendre possible la mise en évidence des caractères tapés (par du gras par ex), ceci dans la liste des items proposés. Par ex si je tape "ra", il me serait proposé :
radin
parade
etc
L'utilisation de preg_replace et d'une expression régulière semble convenir à la problématique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
if ($conn)
	{
		$fetch = mysql_query("SELECT * FROM (SELECT titre AS res, concat('t',id_livre)AS id
  FROM livre
 WHERE titre LIKE '%".mysql_real_escape_string($_GET['term'])."%'
 
 union ALL
SELECT prenom_nom_cb AS res, concat('c',id_contributeur) AS id
  FROM contributeurs
 WHERE nom_prenom_cb LIKE '%".mysql_real_escape_string($_GET['term'])."%'OR prenom_nom_cb LIKE '%".mysql_real_escape_string($_GET['term'])."%') AS resultat ORDER BY res ASC LIMIT 0,10");
 
//particularité du jquery autocomplete =>Le passage de la valeur cherchée se fait par la variable $_GET['term']	
 
		while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
 
$row['res']= preg_replace('.(' . preg_quote($_GET['term']) . ').i', '<span style="color:red">\1</span>', $row['res']);//mise en évidence lettres tapées dans liste proposition
 
			$row_array['value'] = $row['res'];
 
			array_push($return_arr,$row_array);
		}
	}
 
	mysql_close($conn);
 
	echo json_encode($return_arr);

Or la combinaison du preg_replace et de l'expression régulière ne donne pas le résultat escompté. Si je tape dans l'input text les caractères "ra", le système m'affiche le choix suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

pa<span style="color:red">ra</span>de

au lieu de colorer en rouge les caractères "ra".
Voyez-vous les raisons de ce dysfonctionnement ? Merci.

[Djakisback]

Salut,
la regex semble fonctionner ? Est-ce que tu colles pas un span dans un select, ce qui n'est pas possible ?

[almoha]

Merci de ta réponse. Le système d'autocompletion affiche les propositions dans une liste li avec un lien. Si je tape "ra", je vois, grâce à firebug, le mot "parade" dans la liste des propositions, comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">pa&lt;span style="color:red"&gt;ra&lt;/span&gt;de</a>
</li>

Je ne sais pas si cela permet d'y voir plus clair pour trouver une solution...

[Djakisback]

Je me demande si c'est pas ton mix preg_quote(), json_encode().
preg_quote() te transforme "<" en "\<" et donc en json ça devient de la chaîne de caractères.
Tu devrais faire un var_dump() de $row['res'] dans le while histoire de situer le problème.

[almoha]

Ta suggestion me paraît pertinente. Étant donné que je suis obligé de conserver le json_encode(), comment est-il possible d'arriver au résultat escompté ? Merci encore.
EDIT : je n'avais pas lu ta dernière phrase relative au var_dump. Je teste et je poste un nouveau message.

EDIT2 : si je tape "ra" (dans ma base j'ai le nom "frazetta"), le var_dump me retourne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
string(40) " F<span style="color:red">ra</span>zetta"

Je suis preneur de toute aide complémentaire. Merci.

[Djakisback]

Bon, j'édite encore mon message mais non finalement le span devrait être interprété dans la sortie du var_dump(), ce qui veut dire que les < et > sont déjà encodés ce qui doit poser le problème. Si tu affiches la source de la sortie du var_dump() tu as déjà les &lt; et &gt; je pense ?

[almoha]

Merci de ton intérêt pour mon sujet. Si je tape "fraz" (pour "frazetta), la réponse figurant dans l'onglet XHR de firebug est la suivante :

Pour le var_dump($row['res']);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
string(40) " <span style="color:red">Fraz</span>etta"

Pour le var_dump($return_arr);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
array(1) {
  [0]=>
  array(2) {
    ["value"]=>
    string(40) " <span style="color:red">Fraz</span>etta"
    ["id"]=>
    string(5) "c1152"
  }
}

Contenu du json_encode($return_arr);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
[{"value":" <span style=\"color:red\">Fraz<\/span>etta","id":"c1152"}]

Je ne sais pas si cela t'éclaire sur les causes du dysfonctionnement ... Je précise que je suis débutant. Merci

[Djakisback]

Est-ce que tu as changé ton code entre temps car maintenant les < et > ne semblent plus convertis ?
Sur la page de json_encode() on peut voir que la fonction échappe les / ce qui semble être finalement le problème. Un solution à l'arrache si tu es en php < 5.4 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo str_replace('\\/', '/', json_encode($return_arr));

Si tu es en php >= 5.4 tu peux utiliser une option qui permet de ne pas échapper les slashes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo json_encode($return_arr, JSON_UNESCAPED_SLASHES);

[almoha]

Je n'ai pas changé mon code. Cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a class="ui-corner-all" tabindex="-1"> &lt;span style="color:red"&gt;Fra&lt;/span&gt;zetta</a>

s'affiche dans firebug lorsque je fais "inspecter cet élement" après un clic droit dans la liste des propositions.

Cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
[{"value":" <span style=\"color:red\">Fraz<\/span>etta","id":"c1152"}]

s'affiche dans firebug lorsque je clique sur l'option réponse dans l'onglet XHR

Comme je n'ai que PHP 5.3 (en local), j'ai essayé ton code avec str_replace. Mais malheureusement la réponse XHR visible dans firebug est toujours la même avec les échappements des " et du /.
Par contre dans la liste des propositions de l'autocompletion, la proposition s'affiche ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 <span style="color:red">Fra</span>zetta

J'avoue être perdu... Une idée complémentaire ? Merci.

[Djakisback]

Est-ce que tu peux mettre ta page ajax complète là où tu crées ton XHR et le morceau de code de la création de ton formulaire ? T'aurais pas un htmlspecialchars() qui traîne quelque part ?

[Edit] Après vérification, je crois que le problème vient de JQuery il faudrait semble-t-il redéfinir le renderer si tu veux pouvoir mettre du HTML.
http://bugs.jqueryui.com/ticket/5918 sinon la méthode autocomplete() de base semble convertir les caractères spéciaux par défaut en Javascript.

Tu devrais créer un nouveau post sur le forum Javascript et/ou t"inspirer du code source de cette page : http://jqueryui.com/demos/autocomplete/custom-data.html

[Djakisback]

L'idée étant de redéfinir la méthode avec quelque chose de ce type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.data( "autocomplete" )._renderItem = function( ul, item ) {
	    return $( "<li></li>" )
 
        .data( "item.autocomplete", item ) .append( $( "<a></a>" ).html( item.label ) ) .appendTo( ul );
 
		};

[almoha]

Bonjour,

Merci infiniment Djakisback Effectivement ta solution par jquery fonctionne. Pour ceux que cela intéresse, voici le code jquery fonctionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<script type="text/javascript">
 
$(function() {
 
            $( "#state" ).autocomplete({
                source: "dev_search_autocomplete.php",
                minLength: 2,
 
 
				select: function (event, ui) {
					$('#state_id').val(ui.item.id_livre);
 
                }
            });
 
 
        });
 
//pour la gestion de la surbrillance
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
        };
 
 
</script>