search: improve behaviour

o Set tabindex to first for "tab -> type" action
o Translate "Search" string
o Redesign matcher to allow searching for multiple words at once
o Hide unwanted dashboard root submenu item
o Whitespace sweep

src/opnsense/mvc/app/models/OPNsense/Base/Menu/Menu.xml

 <menu>
     <Lobby order="0" cssClass="fa fa-laptop">
         <Dashboard order="0" url="/index.php" cssClass="fa fa-dashboard fa-fw">
-            <Root url="/"/>
+            <Root url="/" visibility="hidden"/>
         </Dashboard>
         <License order="1" url="/license.php" cssClass="fa fa-balance-scale fa-fw"/>
         <Password order="2" url="/system_usermanager_passwordmg.php" cssClass="fa fa-key fa-fw"/>

src/opnsense/mvc/app/views/layouts/default.volt

@@ -97,6 +97,23 @@
                         });
                         $("#menu_search_box").typeahead({
                             source: menusearch_items,
+                            matcher: function (item) {
+                                var ar = this.query.trim()
+                                if (ar == "") {
+                                    return false;
+                                }
+                                ar = ar.toLowerCase().split(/\s+/);
+                                if (ar.length == 0) {
+                                    return false;
+                                }
+                                var it = this.displayText(item).toLowerCase();
+                                for (var i = 0; i < ar.length; i++) {
+                                    if (it.indexOf(ar[i]) == -1) {
+                                        return false;
+                                    }
+                                }
+                                return true;
+                            },
                             afterSelect: function(item){
                                 window.location.href = item.id;
                             }
@@ -148,7 +165,7 @@
 						<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">
+									<input type="text" style="width: 250px;" class="form-control" tabindex="1" placeholder="{{ lang._('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>

src/opnsense/www/js/bootstrap3-typeahead.js

@@ -80,7 +80,7 @@
         // Updater can be set to any random functions via "options" parameter in constructor above.
         // Add null check for cases when upadter returns void or undefined.
         if (!newVal) {
-          newVal = "";	
+          newVal = "";
         }
         this.$element
           .val(this.displayText(newVal) || newVal)
@@ -109,11 +109,11 @@
 
       var element;
       if (this.shown) {
-      	element = this.$menu;
+	element = this.$menu;
       } else if (this.$appendTo) {
-      	element = this.$menu.appendTo(this.$appendTo);
+	element = this.$menu.appendTo(this.$appendTo);
       } else {
-      	element = this.$menu.insertAfter(this.$element);
+	element = this.$menu.insertAfter(this.$element);
       }
       element.css({
           top: pos.top + pos.height + scrollHeight

src/www/fbegin.inc

@@ -114,7 +114,7 @@ if($need_alert_display == true) {
           <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">
+                <input type="text" style="width: 250px;" class="form-control" tabindex="1" placeholder="<?= htmlspecialchars(gettext('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>

src/www/head.inc

@@ -201,6 +201,23 @@ $pagetitle .= sprintf(' | %s.%s', $config['system']['hostname'], $config['system
               });
               $("#menu_search_box").typeahead({
                   source: menusearch_items,
+                  matcher: function (item) {
+                      var ar = this.query.trim()
+                      if (ar == "") {
+                          return false;
+                      }
+                      ar = ar.toLowerCase().split(/\s+/);
+                      if (ar.length == 0) {
+                          return false;
+                      }
+                      var it = this.displayText(item).toLowerCase();
+                      for (var i = 0; i < ar.length; i++) {
+                          if (it.indexOf(ar[i]) == -1) {
+                              return false;
+                          }
+                      }
+                      return true;
+                  },
                   afterSelect: function(item){
                       window.location.href = item.id;
                   }