在 Jquery UL li 过滤器中更改链接颜色答案

【问题标题】：Change Link Color in Jquery UL li Filter在 Jquery UL li 过滤器中更改链接颜色
【发布时间】：2013-12-12 20:18:59
【问题描述】：

我是 jquery 的新手。我要创建的是无序列表中的 Jquery 过滤器，顶部有链接和输入字段。当我在输入字段中键入字母时，我希望 li 项目内的链接字母改变颜色。没有链接是可以实现的，但我需要链接（a href）。例如：如果我输入 Mumbai 的“Mum”，则列表中具有 MUM 的字母应变为红色。看看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 所有其他我都做过的事情。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

又短又甜！ :) ...更好的是我会说因为它节省了代码行以及更少的时间来理解...谢谢@Shubhansh

【解决方案2】：

这是工作演示http://jsfiddle.net/MF4Tn/12/

我添加了两个 javascript 函数：jQuery.fn.removeHighlight 和 jQuery.fn.highlight 以及少量 css 代码。我从下面发布的链接中获取的 javascript。

这里写了有用的代码example 感谢@dzordz

【讨论】：

非常感谢@spring :) ...正是我需要的！ ... 非常感谢。

【解决方案3】：

我创建了一个可能适合您需求的小提琴： http://jsfiddle.net/MF4Tn/29/

基本上是这样：

$(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());
                }
            });

这样做是这样的：

我遍历所有主播，然后检查天气内容是否符合过滤器
如果是这样，我插入一个使该文本变为红色的跨度

我删除了所有 slideDown 和 slideUp 的东西，以便让这个例子干净。

甚至可以将.split() 和.join() 的东西更改为一些字符串替换功能。

【讨论】：