Javascript 更改Jquery UL li过滤器中的链接颜色

我不熟悉jquery。我想在无序列表中创建一个Jquery过滤器，顶部有链接和输入字段。当我在输入字段中键入字母时，我希望li项目中链接的字母改变颜色。没有链接，这是可以实现的，但我需要它的链接（a href）。例如：如果我输入孟买的“妈妈”，那么列表中有妈妈的字母应该变成红色。看一看这本书

HTML

Javascript

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  function listFilter(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }

  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

（函数（$）{
jQuery.expr['：'].Contains=函数（a，i，m）{
返回（a.textContent | | a.innerText | |“”）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};
函数listFilter（标题、列表）{
var form=$（“”）.attr（{“类”：“过滤性能”，“操作”：“#”}），
输入=$（“”）.attr（{“类”：“过滤器输入”，“类型”：“文本”}）；
$（表单）.append（输入）.appendTo（标题）；
$（输入）
.改变（功能）{
var filter=$（this.val（）；
如果（过滤器）{
$（列表）.find（“a:not（：Contains（“+filter+”）））.parent（）.slideUp（）；
$（列表）.find（“a:包含（“+filter+”））.parent（）.slideDown（）；
}否则{
$（list.find（“li”）.slideDown（）；
}
返回false；
})
.keyup（函数（）{
$（this.change（）；
});
}
$（函数（）{
listFilter（$（“#标题”）、$（“#列表”）；
});
}（jQuery））；

以下是我想要实现的目标：

任何帮助都将不胜感激，我只是在这一步卡住了。N我已经完成了所有其他工作。

这是工作演示

我添加了两个javascript函数：

jQuery.fn.removeHighlight

和

jQuery.fn.highlight

和少量css代码。我从下面发布的链接中获取的javascript

下面是编写的有用代码

---

感谢@dzordz，这里是另一个解决方案演示

---

我使用

子字符串

进行了一些在线更改，然后添加了

span

以更改颜色

我创建了一个适合您需要的小提琴：

基本上是这样的：

$(list).find("li>a").each(function(id,el){
              var a=$(el);
                if(a.text().toLowerCase().indexOf(filter.toLowerCase()) >= 0){
                  a.html(a.text().split(filter).join("<span style='color:red;'>"+filter+"</span>" ));
                }else{
                  a.html(a.text());
                }
            });

$（列表）。查找（“li>a”）。每个（函数（id，el）{
var a=$（el）；
如果（a.text（）.toLowerCase（）.indexOf（filter.toLowerCase（））>=0）{
a、 html（a.text（）.split（filter.join）（“+filter+”））；
}否则{
a、 html（a.text（））；
}
});

这是如何做到的：

• 我迭代所有的achor，然后检查内容是否与过滤器一致
• 如果是这样，我将插入一个使此文本变为红色的跨距

我删除了所有的

slideDown

和

slideUp

内容，以便清理这个示例

甚至可以将

.split（）

和

.join（）

更改为字符串替换函数。

非常感谢@spring:）。。。正是我需要的。。。非常感谢。短n甜！：）。。。更好的是，我会说，因为它节省了代码行以及更少的时间来理解。。。谢谢@Shubhansh

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  function listFilter(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }

  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

$(list).find("li>a").each(function(id,el){
              var a=$(el);
                if(a.text().toLowerCase().indexOf(filter.toLowerCase()) >= 0){
                  a.html(a.text().split(filter).join("<span style='color:red;'>"+filter+"</span>" ));
                }else{
                  a.html(a.text());
                }
            });