Question

我想突出显示的匹配文字：contains。

我试过了：

$("ul#my_list").children('li:icontains("'+q+'")').each(function() {
            var newText = $(this).html().replace(q, "<span class='highlight_text'></span>");
            $(this).html(newText);
        });

这打破了字符串

$("ul#my_list").children('li:icontains("'+q+'")').each(function(){
            var content = "Content1";
            this.innerHTML = this.innerHTML.replace(content,"<span class='highlight_text'>"+content+"</span>")
        });

这个没有破坏但只突出显示找到的第一个角色

继承人：http://jsfiddle.net/6r1q9rx2/

更新了小提琴：http://jsfiddle.net/6r1q9rx2/1/

Answer 1

试试：http://jsfiddle.net/6r1q9rx2/3/。

您的问题是，在第一次按键后检查匹配的文本之前，您不会删除插入的高亮显示跨度。

请参阅：

jQuery.expr.filters.icontains = function(elem, i, m) {
    return (elem.innerText || elem.textContent || "").toLowerCase().indexOf(m[3].toLowerCase()) > -1;
}
$(function() {
    $("#search").on("keyup", function(e) {
        var q = $(this).val();

        //hide all items
        $("ul#my_list").children("li").hide();
        $("ul#my_list").children('li:icontains("'+q+'")').show();
        /*$("ul#my_list").children('li:icontains("'+q+'")').each(function() {
            var newText = $(this).html().replace(q, "<span class='highlight_text'></span>");
            $(this).html(newText);
        });*/
        $("ul#my_list").children('li').each(function(){
            $(this).html($(this).text());
        });
        $("ul#my_list").children('li:icontains("'+q+'")').each(function(){
            var content = q;
            this.innerHTML = this.innerHTML.replace(content,"<span class='highlight_text'>"+content+"</span>")
        });
    });
});

如何突出显示的字符串：contains

1 个答案: