jquery quicksearch element to search not working as expected

Question

I'm using a jquery plugin called quicksearch for filtering a list of comments.

Here is a snippet from the markup:

<ol class="commentlist">


        <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="li-comment-9">

            <article id="comment-9" class="comment">


                <div class="comment-content">
                    <p><span class="ecf-field ecf-field-1">

                <strong class="ecf-question">I CHOOSE :</strong><span class="ecf-answer">HTML5</span>

                    </span></p>

                 <p>I agree with HTML 5</p>

                </div>

            </article><!-- #comment-## -->

        </li><!-- #comment-## -->

What I want is to search by this <span class="ecf-answer">HTML5</span> so, if the search query match HTML5 to display the <li>items which correspond with the search query.

The problem is that if I search for HTML5 is searching through the entire <li>item and not just through the <span class="ecf-answer">HTML5</span>

My question is how can I make it to search through this <span class="ecf-answer">HTML5</span> but still remove all the <li>item which are not corresponding ?

Here is a fiddle to have a better understanding of what I'm talking about.

Is this possible ?

Answer 1

In the code you've provided via JSFiddle, i saw that the cache var, that was the one responsible for being compared on the query, was being passed as the whole <li> inner-structure.

By editing the line# 134:

return e.strip_html(this.innerHTML);

to

return e.strip_html($(this).find(".ecf-answer").html());

...you are then telling the application to compare only the .efc-answer part of each item.

Here's the working fiddle http://jsfiddle.net/2QAdv/1/

However, there's another solution which is to provide to the quicksearch constructor, the selector value, as follows:

$("#id_search").quicksearch("ol li article ", {
                                               noResults: '#noresults',
                                               loader: 'span.loading',
                                               selector: '.ecf-answer'
                                               });

http://jsfiddle.net/2QAdv/2/

I hope this is what you're looking for.

Cheers :)