UI Autocomplete : mettre en évidence les caractères tapés [Résolu]

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);
        };

09/09/2011, 09h30	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	avec un replace au moyen d'une expression régulière qui entoure les caractères tapes avec <b></b> __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email