diff --git a/dashboard-ui/css/search.css b/dashboard-ui/css/search.css index f42b7951f2..cac650eeba 100644 --- a/dashboard-ui/css/search.css +++ b/dashboard-ui/css/search.css @@ -74,6 +74,10 @@ background-color: #eee; } + .searchHint:focus { + background-color: #eee; + } + .searchHintImage { display: inline-block; width: 15%; diff --git a/dashboard-ui/scripts/search.js b/dashboard-ui/scripts/search.js index 8cfd3f8ebb..485a565412 100644 --- a/dashboard-ui/scripts/search.js +++ b/dashboard-ui/scripts/search.js @@ -246,12 +246,54 @@ return false; }); + $('#searchHints', parentElem).on("keydown", '.searchHint', function (e) { + + // Down + if (e.keyCode == 40) { + + var next = $(this).next()[0]; + + if (next) { + next.focus(); + } + + } + + // Up + if (e.keyCode == 38) { + + var prev = $(this).prev()[0]; + + if (prev) { + prev.focus(); + } else { + $('#txtSearch', parentElem)[0].focus(); + } + + } + }); + $('#txtSearch', parentElem).on("keyup", function (e) { - var value = this.value; + // Down + if (e.keyCode == 40) { - showFlyout(parentElem); - updateFlyout(parentElem, value); + var first = $('.searchHint', parentElem)[0]; + + if (first) { + first.focus(); + } + + } + + }).on("keyup", function (e) { + + if (e.keyCode != 40) { + var value = this.value; + + showFlyout(parentElem); + updateFlyout(parentElem, value); + } }).on("focus", function () {