UI Autocomplete : mettre en évidence les caractères tapés

**almoha** · 08/09/2011, 21h22

Bonjour,

J'utilise l'UI autocomplete avec le code suivant :

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
31
32
33
34
35
 
<script type="text/javascript">
 
$(function() {
 
            $( "#state" ).autocomplete({
                source: "dev2_search_autocomplete.php",
                minLength: 2,
 
 
				select: function (event, ui) {
					$('#state_id').val(ui.item.id);
                }
            });
 
 
        });
 
 
</script>
 
 
</head>
 
<body>
 
<form action ="" method="POST">
 
<div class="ui-widget">
   <label for="state">state </label>
   <input type="text" id="state" name="state" style="width:850px; height:20px;"/> 
   <input type="hidden" id="state_id" name="state_id" /> 
   <input type="submit" name="submitBtn" value="ok" />
</div>
</form>

Le système fonctionne. Je souhaiterais savoir s'il est faisable de l'enrichir en rendant possible la mise en évidence des caractères tapés (par du gras par ex), ceci dans liste des items proposés. Par ex si je tape "ra", il me serait proposé :
radin
parade
etc

Est-possible de gérer cette fonctionnalité en jquery ? Merci.

**SpaceFrog** · 09/09/2011, 09h30

avec un replace au moyen d'une expression régulière qui entoure les caractères tapes avec <b></b>

**almoha** · 09/09/2011, 13h15

Merci de votre réponse. La solution proposée passe-t-elle par du JavaScript ou par du Php ? La chaine à traiter est du style :

Code :

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

1
2
3
4
 
$fetch = mysql_query("SELECT * FROM livre where titre like '%" . mysql_real_escape_string($_GET['term']) . "%'");
		while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
			$row_array['value'] = $row['titre'];//chaine à traiter

Merci de votre aide.

**almoha** · 12/09/2011, 18h27

Bonjour,

Pensant que la solution à mon problème passait par Php, j'avais posté sur le forum Php adapté. Finalement, grâce à "Djakisback", j'ai appris que la solution passait en fait par jquery. Pour ceux qui souhaitent ajouter la "surbrillance" dans l'autocomplete ui, voici le code à ajouter à la suite du code principal :

Code :

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

1
2
3
4
5
6
7
8
9
 
//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);
        };

UI Autocomplete : mettre en évidence les caractères tapés

jQuery

Discussions similaires

Partager

Partager