(legacy) add menu search box in legacy template, we may need to consolidate some JS code later

src/www/fbegin.inc

@@ -111,9 +111,18 @@ if($need_alert_display == true) {
       </div>
       <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav navbar-right">
+          <li>
+            <form class="navbar-form" role="search">
+              <div class="input-group">
+                <input type="text" style="width: 250px;" class="form-control" placeholder="Search" data-provide="typeahead" id="menu_search_box">
+                <div class="input-group-btn">
+                  <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
+                </div>
+              </div>
+            </form>
+          </li>
           <li id="menu_messages"><?= get_menu_messages() ?></li>
         </ul>
-
       </div>
     </div>
   </nav>

src/www/head.inc

@@ -108,6 +108,9 @@ $pagetitle .= sprintf(' | %s.%s', $config['system']['hostname'], $config['system
     <!-- append some helper functions to integrate into the legacy code -->
     <script type="text/javascript" src="/javascript/opnsense_legacy.js"></script>
 
+    <!-- Bootstrap type ahead -->
+    <script type="text/javascript" src="/ui/js/bootstrap3-typeahead.min.js"></script>
+
     <?php
     /*
      *  Find all javascript files that need to be included
@@ -182,6 +185,28 @@ $pagetitle .= sprintf(' | %s.%s', $config['system']['hostname'], $config['system
             });
         }
       });
+
+      // hook in live menu search
+      $.ajax("/api/core/menu/search/", {
+          type: 'get',
+          cache: false,
+          dataType: "json",
+          data: {},
+          success: function (data) {
+              var menusearch_items = [];
+              $.each(data,function(idx, menu_item){
+                  if (menu_item.Url != "") {
+                      menusearch_items.push({id:menu_item.Url, name:menu_item.breadcrumb});
+                  }
+              });
+              $("#menu_search_box").typeahead({
+                  source: menusearch_items,
+                  afterSelect: function(item){
+                      window.location.href = item.id;
+                  }
+              });
+          }
+      });
     });
     //]]>
     </script>