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

Question

I am new to jquery. What I want to create is a Jquery Filter in Unordered list with links and input field on the top. As I type letters in the input field I want the letters of links inside the li items to change color. Without link it is achievable but I need it for links(a href). for eg: If I type 'Mum' of Mumbai then the letters in the list having MUM should change to red color. Have a look at the 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));

And here's what I want to achieve: Screenshot

Any help would be appreciated I am just stuck at this step. N all other stuff I have done it.

Answer 1

Here is the working Demo http://jsfiddle.net/MF4Tn/12/

I have added two javascript functions: jQuery.fn.removeHighlight and jQuery.fn.highlight and little css code. javascript I took from the link that I posted below.

Here is written useful code example thanks to @dzordz

Answer 2

Here is another solution Demo http://jsfiddle.net/MF4Tn/28/

I have made some in-line changes using substring and then span is added to change color

Answer 3

i created a fiddle that may suit your needs: http://jsfiddle.net/MF4Tn/29/

Basicly it does:

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

This is how it is done:

• I iterate over all achors and than check weather the content is in line with the filter
• If so I insert a span that makes this text red

I removed all the slideDown and slideUp things in order to have this example clean.

One may even change the .split() and .join() thing into some string replace funktion.