jQuery Suchen Sie einen Text aus der Liste und markieren Sie ihn

Question

Ich habe eine Suchleiste:

<input type="search" data-cancel-btn=false 
name="search" id="searchbar" value="" placeholder="Seach"/>

und auflisten:

temp    += '<li class="ui-li-has-multiline" id="' + id
    + '" name="' + name
    + '" status="' + status
    + '" sortId="' + sortId
    + '" img="'+ img
    + '"> <a href="#"> '
    + '<img src="' + img
    + '" alt="icon" class="ui-li-bigicon" '
    + 'style="border-radius:50px; border:2px solid dimgray; overflow:hidden ">'+ name
    + '<span class="ui-li-text-sub" style="float:left;left:5px;top:30px;">'+lastMessageText+'</span>'
    + '<span class="ui-li-text-sub2">'+lastMessageTime+'</span>';

if (status == 'online') {
    temp += '<img class="ui-li-icon-sub" src="../res/online_list.png" alt="online">';
}
temp += '</a></li>';

$("#messagesList").html(temp);

Ich möchte die Suche durch jede Eingabeänderung in der Suchleiste mit Hervorhebung des Suchtexts realisieren.aber meine Funktion funktioniert nicht (Alert gibt den Wert des Parameters „sortId“ von zurück <li>):

 $("#searchbar").on("input change", function (e) {
        var regEx;
        var content;

        content = $("#allFriendsList");
        regEx = new RegExp(".*" + $("#searchbar").val().toLowerCase());

        $(content).find("li").each(
        function () {               
            alert($(this).text());

            if ($(this).text().toLowerCase().match(regEx)) {
                $(this).show();
            } else {
                $(this).hide();
            }
            return false;
        });
        return false;
    });

Answer 1

Du könntest benutzen: jQuery Highlight-Plugin

und in deinem Code:

$('li').highlight($('#searchbar').val());

Sie sollten dies wahrscheinlich erst nach mindestens 3 Zeichen oder so tun.