diff --git a/public/app/directives/templateParamSelector.js b/public/app/directives/templateParamSelector.js index 1f1cf9faf5f..fa0e56acebc 100644 --- a/public/app/directives/templateParamSelector.js +++ b/public/app/directives/templateParamSelector.js @@ -21,9 +21,15 @@ function (angular, app, _) { var variable = scope.variable; scope.show = function() { + if (scope.selectorOpen) { + return; + } + scope.selectorOpen = true; scope.giveFocus = 1; scope.oldCurrentText = variable.current.text; + scope.highlightIndex = -1; + var currentValues = variable.current.value; if (_.isString(currentValues)) { @@ -37,11 +43,39 @@ function (angular, app, _) { return option; }); + scope.search = {query: '', options: scope.options}; + $timeout(function() { bodyEl.on('click', scope.bodyOnClick); }, 0, false); }; + scope.queryChanged = function() { + scope.highlightIndex = -1; + scope.search.options = _.filter(scope.options, function(option) { + return option.text.toLowerCase().indexOf(scope.search.query.toLowerCase()) !== -1; + }); + }; + + scope.keyDown = function (evt) { + if (evt.keyCode === 27) { + scope.hide(); + } + if (evt.keyCode === 40) { + scope.moveHighlight(1); + } + if (evt.keyCode === 38) { + scope.moveHighlight(-1); + } + if (evt.keyCode === 13) { + scope.optionSelected(scope.search.options[scope.highlightIndex], {}); + } + }; + + scope.moveHighlight = function(direction) { + scope.highlightIndex = (scope.highlightIndex + direction) % scope.search.options.length; + }; + scope.optionSelected = function(option, event) { option.selected = !option.selected; @@ -100,10 +134,6 @@ function (angular, app, _) { scope.hide = function() { scope.selectorOpen = false; - // if (scope.oldCurrentText !== variable.current.text) { - // scope.onUpdated(); - // } - bodyEl.off('click', scope.bodyOnClick); }; diff --git a/public/app/features/dashboard/partials/variableValueSelect.html b/public/app/features/dashboard/partials/variableValueSelect.html index a556b57a72d..ff5291c11d3 100644 --- a/public/app/features/dashboard/partials/variableValueSelect.html +++ b/public/app/features/dashboard/partials/variableValueSelect.html @@ -9,12 +9,13 @@
- +
- + {{option.text}}
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less index 35cf84022cb..f12de218d8b 100644 --- a/public/css/less/submenu.less +++ b/public/css/less/submenu.less @@ -49,7 +49,7 @@ display: block; padding: 0 8px; - &:hover { + &:hover, &.highlighted { background-color: @blueDark; }