Search: Result navigation with up/down
This commit is contained in:
parent
4dcba1943c
commit
26e16a83eb
|
@ -220,6 +220,8 @@ ul#searchresults {
|
|||
}
|
||||
ul#searchresults li {
|
||||
margin: 10px 0px;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
ul#searchresults .breadcrumbs {
|
||||
float: right;
|
||||
|
@ -445,6 +447,9 @@ ul#searchresults span.teaser em {
|
|||
.light .searchresults-outer {
|
||||
border-bottom-color: #888;
|
||||
}
|
||||
.light ul#searchresults li.focus {
|
||||
background-color: #e4f2fe;
|
||||
}
|
||||
.light .breadcrumbs {
|
||||
color: #CCC;
|
||||
}
|
||||
|
@ -583,6 +588,9 @@ ul#searchresults span.teaser em {
|
|||
.coal .searchresults-outer {
|
||||
border-bottom-color: #98a3ad;
|
||||
}
|
||||
.coal ul#searchresults li.focus {
|
||||
background-color: #2b2b2f;
|
||||
}
|
||||
.coal .breadcrumbs {
|
||||
color: #686868;
|
||||
}
|
||||
|
@ -721,6 +729,9 @@ ul#searchresults span.teaser em {
|
|||
.navy .searchresults-outer {
|
||||
border-bottom-color: #5c5c68;
|
||||
}
|
||||
.navy ul#searchresults li.focus {
|
||||
background-color: #242430;
|
||||
}
|
||||
.navy .breadcrumbs {
|
||||
color: #5c5c68;
|
||||
}
|
||||
|
@ -859,6 +870,9 @@ ul#searchresults span.teaser em {
|
|||
.rust .searchresults-outer {
|
||||
border-bottom-color: #888;
|
||||
}
|
||||
.rust ul#searchresults li.focus {
|
||||
background-color: #dec2a2;
|
||||
}
|
||||
.rust .breadcrumbs {
|
||||
color: #757575;
|
||||
}
|
||||
|
@ -1001,6 +1015,9 @@ ul#searchresults span.teaser em {
|
|||
.ayu .searchresults-outer {
|
||||
border-bottom-color: #888;
|
||||
}
|
||||
.ayu ul#searchresults li.focus {
|
||||
background-color: #252932;
|
||||
}
|
||||
.ayu .breadcrumbs {
|
||||
color: #5f5f5f;
|
||||
}
|
||||
|
|
|
@ -32,6 +32,9 @@ $( document ).ready(function() {
|
|||
|
||||
SEARCH_HOTKEY_KEYCODE: 83,
|
||||
ESCAPE_KEYCODE: 27,
|
||||
DOWN_KEYCODE: 40,
|
||||
UP_KEYCODE: 38,
|
||||
SELECT_KEYCODE: 13,
|
||||
|
||||
formatSearchMetric : function(count, searchterm) {
|
||||
if (count == 1) {
|
||||
|
@ -371,6 +374,7 @@ $( document ).ready(function() {
|
|||
,
|
||||
globalKeyHandler : function (e) {
|
||||
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
|
||||
|
||||
if (e.keyCode == this.ESCAPE_KEYCODE) {
|
||||
e.preventDefault();
|
||||
this.searchbar.removeClass("active");
|
||||
|
@ -386,6 +390,38 @@ $( document ).ready(function() {
|
|||
e.preventDefault();
|
||||
this.searchbar_outer.slideDown()
|
||||
this.searchbar.focus();
|
||||
return;
|
||||
}
|
||||
if (this.hasFocus() && e.keyCode == this.DOWN_KEYCODE) {
|
||||
e.preventDefault();
|
||||
this.unfocusSearchbar();
|
||||
this.searchresults.children('li').first().addClass("focus");
|
||||
return;
|
||||
}
|
||||
if (!this.hasFocus() && (e.keyCode == this.DOWN_KEYCODE
|
||||
|| e.keyCode == this.UP_KEYCODE
|
||||
|| e.keyCode == this.SELECT_KEYCODE)) {
|
||||
// not `:focus` because browser does annoying scrolling
|
||||
var current_focus = search.searchresults.find("li.focus");
|
||||
if (current_focus.length == 0) return;
|
||||
e.preventDefault();
|
||||
if (e.keyCode == this.DOWN_KEYCODE) {
|
||||
var next = current_focus.next()
|
||||
if (next.length > 0) {
|
||||
current_focus.removeClass("focus");
|
||||
next.addClass("focus");
|
||||
}
|
||||
} else if (e.keyCode == this.UP_KEYCODE) {
|
||||
current_focus.removeClass("focus");
|
||||
var prev = current_focus.prev();
|
||||
if (prev.length == 0) {
|
||||
this.searchbar.focus();
|
||||
} else {
|
||||
prev.addClass("focus");
|
||||
}
|
||||
} else {
|
||||
window.location = current_focus.children('a').attr('href');
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
|
|
Loading…
Reference in New Issue