Mettre en gras les suggestions d'un champ de recherche (en autocomplétion) correspondant à la saisie

**bobo88** · 12/05/2021, 19h08

Bonjour à tous !

J'essaye de trouver une solution pour mettre en gras (et en couleur) la chaîne de caractère qui est recherchée dans un champ de recherche (en autocomplétion) et qui est présente dans les suggestions correspondant à la saisie, comme dans cette image :
Nom : styled autocomplete.png
Affichages : 167
Taille : 1,9 Ko

Nom : styled autocomplete.png
Affichages : 167
Taille : 1,9 Ko

Voici la piste dans laquelle je me suis lancé, mais qui est mauvaise car elle affiche les balises de style dans les suggestions de l'autocomplétion :

Code :

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

$sugg = preg_replace('#('.preg_quote($searchTerm).')#i', '<b style="color:#5882FA;">$1</b>', $sugg);

Voici les parties concernées de mes fichiers :

PHP avec formulaire

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
<?php
echo "<html><head>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>
<script src=\"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js\"></script>
<script>
$(function(){
$(\"#sugg\").autocomplete({
source: \"sugg.php\",
autoFocus: false,
select: function(event, ui) {
$(\"#sugg\").val(ui.item.label);
$(\"#formid\").submit(); }
});
});
</script>
</head><body>

if(!empty($_POST['forme'])){//s'il y a une saisie
[...code...]
}//fin de s'il y a une saisie

else{// si pas encore de saisie
echo "<form id=\"formid\" action=\"file.php\" method=\"post\">
<p>Enter text</p>
<input id=\"sugg\" type=\"text\" name=\"forme\" class=\"barre\" onkeyup=\"autocomplete()\">
</form>";
}// fin de si pas encore de saisie
 
echo "</body></html>";
?>

PHP pour autocomplétion

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
<?php
$dbHost = 'localhost';
$dbUsername = 'username';
$dbPassword = 'password';
$dbName = 'dbname';
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
$searchTerm = utf8_decode($_GET['term']);
$query = $db->query("SELECT * FROM table WHERE column LIKE '%".$searchTerm."%' LIMIT 10");
$sugg = array();
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$data['value'] = $row['column'];
array_push($sugg, utf8_encode($data['value']));
}
}
echo json_encode($sugg);
?>

Voici également un jsfiddle de ces codes mais avec un HTML au lieu du PHP avec formulaire : https://jsfiddle.net/jbmqce2s/
Notez que les données utilisées pour l'autocomplétion sont externes : dans une base de données, d'où la requête SQL.
Je suis un grand débutant donc j'espère que je vais comprendre vos solutions^^ Je vais faire de mon mieux

**mathieu** · 12/05/2021, 21h50

vous pouvez personnaliser l'affichage avec "_renderItem"
https://api.jqueryui.com/autocomplet...od-_renderItem

il y a un exemple d'utilisation là :
https://jqueryui.com/autocomplete/#custom-data

**bobo88** · 12/05/2021, 23h40

Oui merci pour cette piste. C'est une bonne piste et je l'essaye avec une fonction mais je n'y arrive pas... Voici mon code :

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
<script>
  function makeBold(needle, haystack) {
    return haystack.replace(new RegExp("(" + needle + ")", "i"), "<b>$1</b>");
  }
 
  $("#sugg").autocomplete({
    source: "sugg.php",
    autoFocus: false,
    select: function(event, ui) {
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
      .append(makeBold($("#sugg").val(), item.label))
      .appendTo(ul);
  };
});
</script>

Je ne vois pas ce qui cloche

je suis un peu perdu là

**bobo88** · 13/05/2021, 01h01

Alors, ce problème est pour dire résolu si j'ajoute $(function() { et }); pour envelopper mon code, tout simplement. J'aimerais bien que le texte se mette en gras aussi lorsqu'on n'écrit pas de caractère accentué alors qu'il y en a dans la suggestion (par exemple, si on écrit "ecole", la suggestion "école" ne se met pas en forme car on a oublié l'accent). Si quelqu'un peut m'aider à régler ce problème...

Mettre en gras les suggestions d'un champ de recherche (en autocomplétion) correspondant à la saisie

jQuery

Discussions similaires

Partager

Partager