jquery live search
<p>I was wondering if someone can help me out with a jquery issue I am having. The code below is a snippet i found on another post but I am looking to adapt it slightly</p>

<p>the Jquery</p>

<pre><code>$(document).ready(function() {
$('#criteria').on("input", function(e) {
    var words = $(this).val().toLowerCase().match(/\S+/g);
    if (!words) {
        $('.links li').show();
    } else {
        $('.links li').each(function() {
            var text = $(this).text().toLowerCase();
            var show = false;
            $.each(words, function(i, word) {
                show = show || Boolean(~text.indexOf(word));
            });
            $(this).toggle(show);

        });
    }
});

}); // end document ready
</code></pre>

<p>and the HTML</p>

<pre><code>&lt;ul class="links"&gt;
&lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;link 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;link 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;link 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Now this works like it should, it looks for a match in the input field and filters the results accordingly by hiding links where there is no match. What I want to do instead of using toggle is add a class to the li elements where there is no match to make them fade using css. </p>

<p>I have tried using $(show).addclass(); instead of $(this).toggle(show); but it doesnt seem to do anything, im assuming because the variable show is not used but when i tried to a class of effect to variable show it does nothing</p>
