How can I perform a search into a group of "accordion" buttons?

How can I perform a search into a group of "accordion" buttons?

I have this static HTML code:

  1.  <form>            
                <input data-role = "filter" type = "search" id = "searchField" placeholder = "Search Entries" data-filter="true"></input>    
                    
                    
            
            
            <!--Devider Goes Here -->        
            <ul data-role = "listview">
                <li data-role = "devider" data-theme = "b"><h4>Browse by category:</h4></li>
            </ul>    
            <div data-role = "content">    
                <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
                    <div data-role = "collapsible">
                      <h3>Audio Entries<span class="ui-li-count">5</span></h3>
                       <ul data-role = "listview"  class="ui-icon-alt">
                            <li data-role = "devider" data-theme = "b">Audio Entries:</li>
                            <li><a href="#"><p>Love Is Perfect</p><p>Type: Audio Cd</p><img src = "images/smAudio.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>La-la Di</p><p>Type: Audio Tape</p><img src = "images/smAudio.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>' Lot to Say</p><p>Type: Audio Cd</p><img src = "images/smAudio.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>From the Heard</p><p>Type: Audio Cd</p><img src = "images/smAudio.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>Sing to Me Now</p><p>Type: Audio Dvd</p><img src = "images/smAudio.png" class="ui-li-icon ui-corner-none"></img></a></li>
                        </ul>
                   </div>
                   
                   <div data-role="collapsible">
                      <h3>Video Entries<span class="ui-li-count">5</span></h3>
                      <ul data-role = "listview"  class="ui-icon-alt">
                            <li data-role = "devider" data-theme = "b">Video Entries:</li>
                            <li><a href="#"><p>Shoot me Now</p><p>Type: Video Dvd</p><img src = "images/smVideo.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>Fire Test</p><p>Type: Video Tape</p><img src = "images/smVideo.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>It was a Time of Glory</p><p>Type: Video Dvd</p><img src = "images/smVideo.png" class="ui-li-icon ui-corner-none"></img></a></li>
                        </ul>
                   </div>
                   
                   <div data-role="collapsible">
                      <h3>Book Entries<span class="ui-li-count">2</span></h3>
                      <ul data-role = "listview"  class="ui-icon-alt">
                            <li data-role = "devider" data-theme = "b">Book Entries:</li>
                            <li><a href="#"><p>Designing Interfaces</p><p>Type: Reference</p><img src = "images/smBook.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>Little House on the Prairie</p><p>Type: Literature</p><img src = "images/smBook.png" class="ui-li-icon ui-corner-none"></img></a></li>
                        
                        </ul>    
                   </div>
                   
                   <div data-role="collapsible">
                      <h3>Other Entries<span class="ui-li-count">4</span></h3>
                      <ul data-role = "listview"  class="ui-icon-alt">
                            <li data-role = "devider" data-theme = "b">Other Entries:</li>
                            <li><a href="#"><p>Car Documents</p><p>Type: Other</p><img src = "images/smOther.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>Windows 98 Cd</p><p>Type: Other</p><img src = "images/smOther.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>Water Bill</p><p>Type: Other</p><img src = "images/smOther.png" class="ui-li-icon ui-corner-none"></img></a></li>
                            <li><a href="#"><p>Guitar Photo</p><p>Type: Other</p><img src = "images/smOther.png" class="ui-li-icon ui-corner-none"></img></a></li>
                        </ul>
                   </div>
                </div>
                
            </div>
            </form>