javascript - 在 Jquery UL li 过滤器中更改链接颜色

Question

我是 jquery 的新手。我想要创建的是一个无序列表中的 Jquery 过滤器，顶部有链接和输入字段。当我在输入字段中键入字母时，我希望 li 元素中的链接字母改变颜色。没有链接它是可以实现的，但我需要它作为链接(a href)。例如:如果我输入孟买的“妈妈”，那么列表中有妈妈的字母应该变成红色。看看 Jsfiddle

HTML

<div id="location-search">
<p id="header">Select Your Prefered Location</p> 
    <ul id="list"> 
        <li><a href="#">Mumbai</a></li>
        <li><a href="#">Bangalore</a></li>
        <li><a href="#">Goa</a></li>
        <li><a href="#">Navi Mumbai</a></li>
        <li><a href="#">Pune</a></li>
        <li><a href="#">Thane</a></li>
    </ul>
</div>

CSS

body {background:#f3f3f3;}

#location-search {float:left; display:inline; width:280px; background:#fff; padding:20px;}

p#header {font:bold 15px Arial;}
input {
        border:1px solid #ccc;
        font-size:1em;
        height:2.10em;
        *height:1.0em;
        line-height:1.0em;
        padding:0.10em 0;
        width:100%;
    }
    .filterform {
        width:220px;
        font-size:12px;
        display:block;
    }
ul#list {float:left; display:inline; width:224px; padding:10px 0;}
ul#list li {font:bold 13px Arial; padding:5px 0 5px 10px;}
ul#list li a {color:#646464;}

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));

这就是我想要实现的目标: Screenshot

任何帮助将不胜感激我只是停留在这一步。 N 所有其他事情我都做过。

Answer 1

这是另一个解决方案演示 http://jsfiddle.net/MF4Tn/28/

我使用 substring 进行了一些在线更改，然后添加了 span 以更改颜色