Search Bar for separate UL

Search Bar for separate UL

Hello,
So let me explain the setup i'm shooting for, that way you understand the method to my madness.
I have a page that allows the user to select different list items (options for Recent stores, Local stores, and All stores). When the user clicks on one of those list items, the page dynamically adds content to a different ul that is revealed on the page. And in that dynamically added ul, via the data-filter="true" the user can search that particular ul (whatever the user clicked, either recent, local, or all). That all works fine.
Now my goal is to have a search bar that will search all the stores from the original page (the one that shows recent, local, and all stores). Trouble is that the data-filter="true" addition just filters what's inside that particular ul. I want a search bar that will search the separate ul.
The reason I have my ul's separate is because I have a header and a footer that don't transfer nice (as in they don't come over at all) with how JQuery handles transitions down to lower list items. So each of my three original ul's point to a different part of the page (multipage document) that contains an area for loading the dynamic data.
That's kind of a long winded explanation, hopefully it made sense. Here is my code:
  2. <body>

  4. <!-- Start of first page (Shows Store Options) -->
  5. <div data-role="page" id="storeHome">

  7.       <div data-role="header" data-theme="b" id="storeHeader" >
  8.           <a href="Home.html" class="ui-btn-left" rel="external" data-icon="back"  data-add-back-btn="true" >Back</a>
  9.           <h1>Choose Store</h1>
  10.       </div>
  11.  
  12.    
  13.       <input type="text" id="searchStoreBar" placeholder="Search Stores">
  14.    
  15.    
  16.       <ul data-role="listview" data-autodividers="false"  id="storeList">
  17.           
  18.           <li class="opt" id="recentStores"><a href="#storesPage" data-transition="slide">Recent Stores</a></li>
  19.           
  20.           <li class="opt" id="localStores"><a href="#storesPage" data-transition="slide" >Local Stores</a></li>
  21.           
  22.           <li class="opt" id="allStores"><a href="#storesPage" data-transition="slide">All Stores</a></li>
  23.       </ul>
  24.   
  25.   
  26.       
  27.       <div data-role="footer" data-theme="c" class="ui-bar" data-position="fixed" style="padding:0;">
  28.           <a href="Home.html" class="ui-btn-left" data-icon="ROER-burrisLogo" data-iconpos="notext"></a>
  29.           <h4>Prototype</h4>
  30.           <p class="ui-btn-right"><img data-inline="true" src="img/ROERLogo-03.png" width="40" height="34"></p>      
  31.       </div>
  32.     

  34. </div>
  35.     
  36.     <div data-role="page" id="storesPage">
  37.     
  38.       <div data-role="header" data-theme="b" id="storeHeader" >
  39.           <a href="#" class="ui-btn-left back" data-rel="back" data-icon="back" id="backBtn" data-add-back-btn="true" >Back</a>
  40.           <h1>Choose Store</h1>
  41.       </div>
  42.       
  43.       <!--<input type="search" id="subSearchStoreBar" placeholder="Search Stores">-->
  44.       <ul data-role="listview" id="storesUL" data-autodividers="true" data-divider-theme="d"  data-filter="true">
  45.       <!--########### Begin Generated Code for STORES ###############-->
  46.       
  47.         
  48.       
  49.       <!--########### End Generated Code for Stores ###############-->
  50.       </ul>
  51.       <div data-role="footer" data-theme="c" class="ui-bar" data-position="fixed" style="padding:0;">
  52.           <a href="Home.html" class="ui-btn-left" data-icon="ROER-burrisLogo" data-iconpos="notext"></a>
  53.           <h4>Prototype</h4>
  54.           <p class="ui-btn-right"><img data-inline="true" src="img/ROERLogo-03.png" width="40" height="34"></p>      
  55.       </div>
  56.             
  57. </div>

  59. </body>


And here is the javascript/jquery code:

  2. $(document).ready(function() {
  3. User.loadSession(function(){

  5. $("#backBtn").click(function() {
  6. $("#storesUL").empty();
  7. //TODO Empty other store UL's
  8. });
  10. $("#recentStores").click(function() {
  11. Customer.getRecentStores(function(stores){
  12. for(var i = 0; i < stores.length; i++){
  13. $("#storesUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" data-filter="false">' + stores[i].fullname + '</a></li>');
  14. }
  15. $("#storesUL").listview("refresh");
  16. });
  17. });
  19. $("#localStores").click(function() {
  20. Customer.getLocalStores(13, 12, function(stores){
  21. for(var i = 0; i < stores.length; i++){
  22. $("#storesUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide">' + stores[i].fullname + '</a></li>');
  23. }
  24. $("#storesUL").listview("refresh");
  25. });
  26. });
  28. $("#allStores").click(function() {
  29. Customer.getAllStores(function(stores){
  30. for(var i = 0; i < stores.length; i++){
  31. $("#storesUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" data-filter="false">' + stores[i].fullname + '</a></li>');
  32. }
  33. $("#storesUL").listview("refresh");
  34. });
  35. });
  37. $("#searchStoreBar").keyup(function(){
  38. //TODO: Search all stores
  41. //alert("pressed key");
  42. /*Customer.getAllStores(function(stores){
  43. window.location="#storesPage";
  44. for(var i = 0; i < stores.length; i++){
  45. $("#storesUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" >' + stores[i].fullname + '</a></li>');
  46. }
  47. $("#storesUL").listview("refresh");
  50. });*/
  52. });
  54. $("#localStoresUL").on("click", ".store" ,function() {
  55. //alert("store clicked");
  56. var storeId = this.id;

  58. new Order(storeId, function(){
  59. window.location = "Orders/NewOrder.html";
  60. });
  61. });
  63. $("#recentStoresUL").on("click", ".store" ,function() {
  64. //alert("store clicked");
  65. var storeId = this.id;

  67. Order = new Order(storeId, function() {
  68. window.location = "Orders/NewOrder.html";
  69. });
  71. });
  73. $("#allStoresUL").on("click", ".store" ,function() {
  74. //alert("store clicked");
  75. var storeId = this.id;
  77. new Order(storeId, function(){
  78. window.location = "Orders/NewOrder.html";
  79. });
  80. });
  81. });
  82. });
And a good screen is always nice to see to try and get a visual.

Thanks for any help y'all can give!