jQuery Live Search: Specifying searchable element

Question

I'm having some trouble with the jQuery Live Search plugin, specifying which elements should be searchable. I've created a couple jsFiddles to demonstrate the issue.

Note: The default usage of jQuery Live Search simply filters a list of words (demo). My desired usage however filters from blocks of content within the list items:

<li>
    <h2>Australia</h2>
    <p>Lorem ipsum dolor sit amet.</p>
<li>

So what's the problem?

Targeting the <li> as the searchable element works fine - all content within it becomes searchable in the live search results.

However targeting the <h2> (the only part I want searchable) causes the results list to break (all are hidden) despite the counter showing the correct result.

How do I reproduce?

Check out this working Fiddle with the plugin targetting the <li> as the searchable area. As you'll see, searching a country (case sensitive) works correctly (the <h2>) as well as searching "Lorem" returning all 4 results (<p> is also searchable).

What I want to do is make only the <h2> searchable, not anything else within the <li>. Here's a Fiddle with that set. Now when searching a country, the correct result number is displayed but the <li> of that result remains hidden incorrectly. A search for "Lorem" correctly returns no results and a result number of 0.

It seems when an element within the <li> is targeted it breaks the show/hide of the <li> itself. Is this a bug with the plugin or something I'm doing wrong?

Many thanks!

Answer 1

The problem lies in this callback:

on.results(function(results) {
    $('.no-filter-results').hide();
    $('.filter-results li').hide();
    results.show();
});

The results parameter contains a reference to the elements you're targeting (in this case the h2 elements).

You're setting all li elements to be hidden first in this line:

$('.filter-results li').hide();

And then afterwards setting just the h2 elements to be visible with this line:

results.show();

Obviously this is not working because the parent li is still hidden.

The solution is to show the parent li of the h2 in the result, like so:

results.parent('li').show();

This explains why it was working when you were targeting the li element previously.