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 ?
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'
});
I hope this is what you're looking for.
Cheers :)