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
This commit is contained in:
Franco Fichtner 2016-01-22 17:23:47 +01:00
parent dd8d829dc8
commit 4b725a0cd6
5 changed files with 41 additions and 7 deletions

View File

@ -1,7 +1,7 @@
<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"/>

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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;
}