javascriptjqueryjquery-pluginsquick-search

jquery quicksearch element to search not working as expected


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 ?


Solution

  • 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 :)