How do I highlight the searched text in jQuery Mobile's Listview searchbar?

Question

I have a div with data-role="listview" and data-filter="true", which filters my "list" of collapsible divs. The filter function works very nicely but does not highlight the text. So I want to know how to modify the filter to add in the highlight functionality. The JQM docs have a paragraph for changing the way the list items are filtered (view here), but I can't get it to work and i'm not very experienced with raw javascript.

Sample of my code here:

<div data-role="collapsible-set">
    <div data-role="listview" data-filter="true">
        <div class="collapsibleDirectory" data-role="collapsible">
            <H3>Accounting</H3>
            <p>Tyee Carr, Visiting professor<br />
            Phone: <a href="tel:3605469264">360-546-9264</a><br />
            Location: VCLS 308 A<br />
            Email: <a href="mailto:tjcarr@vancouver.wsu.edu">tjcarr@vancouver.wsu.edu</a></p>

            <p>Jane Cote, Acedemic Director - College of Business<br />
            Phone: <a href="tel:3605469756">360-546-9756</a><br />
            Location: VCLS 308 D<br />
            Email: <a href="mailto:janecote@vancouver.wsu.edu">janecote@vancouver.wsu.edu</a></p>

            <p>Claire Kamm Latham, Associate Professor<br />
            Phone: <a href="tel:3605469757">360-546-9757</a><br />
            Location: VCLS 308 Q<br />
            Email: <a href="mailto:clatham@vancouver.wsu.edu">clatham@vancouver.wsu.edu</a></p>

            <p>Brian Routh, Faculty and IMA Faculty Advisor<br />
            Phone: <a href="tel:3605469338">360-546-9338</a><br />
            Location: VCLS 308 T<br />
            Email: <a href="mailto:routh@vancouver.wsu.edu">routh@vancouver.wsu.edu</a></p>

            <p>Debra Sanders, Professor, Associate Director, Master of Program<br />
            Phone: <a href="tel:3605469147">360-546-9147</a><br />
            Location: VCLS 308 F<br />
            Email: <a href="mailto:dsanders@vancouver.wsu.edu">dsanders@vancouver.wsu.edu</a></p>

            <p>Ben Kulp, Acedemic Coordinator<br />
            Phone: <a href="tel:3605469551">360-546-9551</a><br />
            Location: VCLS 308 B<br />
            Email: <a href="mailto:van.cbadvising@vancouver.wsu.edu">van.cbadvising@vancouver.wsu.edu</a></p>

            <p>Mary Stender, Acedemic Coordinator<br />
            Phone: <a href="tel:3605469751">360-546-9751</a><br />
            Location: VCLS 308 C<br />
            Email: <a href="mailto:mstender@vancouver.wsu.edu">mstender@vancouver.wsu.edu</a></p>
        </div>
    </div>
</div>

and the full project and source code can be found here: www.dtc-wsuv.org/mscoggins/ASWSUV/

Answer 1

Please try copy pasting this pastie.. http://pastebin.com/5UZEaAHS

It uses a plugin from here http://johannburkard.de/resources/Johann/jquery.highlight-4.closure.js