Question

我是jquery的新手。我想要创建的是一个无序列表中的Jquery过滤器，顶部有链接和输入字段。当我在输入字段中输入字母时，我希望li项目中的链接字母改变颜色。没有链接它是可以实现的，但我需要链接（一个href）。例如：如果我输入孟买的“妈妈”，那么列表中有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我做过的所有其他事情。

Answer 1

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

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

以下是有用的代码example 感谢@dzordz

Answer 2

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

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

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

这是如何完成的：

我遍历所有的achors而不是检查天气，内容与过滤器一致
如果是这样，我插入一个使该文字变为红色的跨度

我删除了所有slideDown和slideUp内容，以便将此示例清理干净。

甚至可以将.split()和.join()内容更改为某些字符串替换功能。

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

3 个答案: