J'ai une liste d'éléments contenant des noms. alors j'ai un eventlistener, qui ckecks pour l'événement keypress. si l'utilisateur tape par ex. Tous les noms commençant par A doivent être affichés avec le caractère A en gras. donc tout départ Comme devrait être audacieux.parties de texte highlite avec jquery, meilleure pratique
Quelle est la meilleure façon d'utiliser jquery pour n'éclairer qu'une partie d'une chaîne?
Merci pour votre aide
Voici une fonction que vous pouvez appeler pendant votre pression de touche pour mettre en évidence une chaîne de recherche:
function Highlight(search)
{
$('ul > li').each(function() {
if (this.innerHTML.indexOf(search) > -1)
{
var text = $(this).text();
text = text.replace(search, "<span id='highlight' style='font-weight: bold'>" + search + "</span>");
$(this).html(text);
}
else
{
this.innerHTML = $(this).text();
}
});
}
html Test:
<ul id='list'>
<li>Bob Jones</li>
<li>Red Smith</li>
<li>Chris Edwards</li>
</ul>
Il est pas tout à fait aussi élégante que la réponse de Pointy, mais il gère les exigence de chaînes assorties.
Il y a des plugins jQuery pour faire la mise en évidence de texte, mais je ne l'ai pas vu celui qui met en évidence des parties de mots.
Une solution possible serait de mettre tous vos noms sur la page avec la première lettre entourée d'une étiquette <span>, avec une classe:
<span class='A FL'>A</span>ugustine
<span class='C FL'>C</span>arlos
Vous pouvez ensuite utiliser jQuery pour jouer avec ceux de nom de classe .
$('whatever').keypress(function(ev) {
var k = e.which.toUpperCase();
$('#textContainer span.FL').css('font-weight', 'normal');
$('#textContainer span.' + k).css('font-weight', 'bold');
});
Notez que les caractères gras sont plus gras que les caractères normaux, donc cela va avoir un effet « tortille » que vos utilisateurs pourraient ne pas aimer. Vous pourriez envisager de changer de couleur à la place.
hmm .. j'ai pensé à ce sujet. de cette façon, je dois mettre des travées autour de chaque signe. Je vais en fait l'étendre aux chaînes correspondantes. si vous écrivez "carl" CARLos devrait être highlited ... pas facile, n'est-ce pas? – helle
Eh bien, si vous voulez faire cela, alors oui, vous aurez besoin de quelque chose de différent. Voici un code pour commencer: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html – Pointy
Merci pour votre aide ... i figured it out et la résolution détaillée vient ici:
var communities = $('#mylist').find('.name');
var temp_exp = new RegExp("^("+match_string+")","i");
communities.each(function(i){
var current = $(this);
var name = current.text();
name = name.replace(temp_exp, '<b>$1</b>');
current.html(name);
});
alors que tous les articles doivent avoir la classe « nom ».
@helle ... cette liste est-elle un tag
non c'est pas une liste de sélection, c'est juste une liste d'éléments. il peut s'agir de lignes dans une table ou de li-tags dans une liste html. J'y accède avec jquery via classes – helle