更改Jquery UL li筛选器中的链接颜色

Change Link Color in Jquery UL li Filter

本文关键字：链接 颜色 筛选 Jquery UL li 更改      更新时间：2023-09-26

我是jquery的新手。我想要创建的是一个JqueryFilter的Unordered列表，上面有链接和输入字段。当我在输入字段中键入字母时，我希望li项目中链接的字母改变颜色。没有链接，它是可以实现的，但我需要它的链接（a href）。例如：如果我输入孟买的"妈妈"，那么列表中有妈妈的字母应该变成红色。看看Jsfidle

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

以下是我想要实现的目标：屏幕截图

如果有任何帮助，我将不胜感激。我只是被困在这一步。N我做过的所有其他事情。

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

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

这是正在运行的Demohttp://jsfiddle.net/MF4Tn/12/

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

下面是编写有用的代码示例感谢@dzordz

我创建了一个小提琴，可以满足您的需求：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());
                }
            });

这是如何做到的：

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

我删除了所有的slideDown和slideUp内容，以便清理这个示例。

人们甚至可以把.split()和.join()的东西变成某种字符串替换放克音。

相关文章：