Boucle entre <li> éléments avec jquery et surligne le texte recherché - jquery

J'ai une page de résultats d'une recherche. Étant donné une liste de résultats, je dois pouvoir mettre en évidence une chaîne de texte donnée à partir d'une entrée. Étant donné le code suivant, je peux mettre en évidence le terme, mais j'essaie de le faire avec une liste de résultats. Le résultat souhaité est de mettre en évidence chaque instance de la chaîne de recherche dans la liste des résultats renvoyés.

HTML

<input type="text" id="searchfor" />
<p id="all_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

CSS

#all_text span {
text-decoration:underline;
background-color:yellow;
}

JavaScript

$("#searchfor").keyup(function () {

var page = $("#all_text");
var pageText = page.text().replace("<span>", "");
var searchedText = $("#searchfor").val();
var theRegEx = new RegExp("(" + searchedText + ")", "igm");
var newHtml = pageText.replace(theRegEx, "<span>$1</span>");
page.html(newHtml);
});

Réponses:

Vous pouvez utiliser le plugin jQuery Highlight

http://bartaz.github.com/sandbox.js/jquery.highlight.html

Il fait un excellent travail de mise en évidence de la rechercherésultats. Il existe une option permettant de passer à un tableau de termes à mettre en évidence plutôt que d'un seul terme. Cela n’est pas évident dans la documentation, mais cela est indiqué dans les commentaires en haut du code.

METTRE À JOUR

Passer plusieurs termes de recherche à la fois (à partir des commentaires en haut du code source):

// search for and highlight more terms at once
// so you can save some time on traversing DOM
$("#content").highlight(["lorem", "ipsum"]);