Templating: Support for search filtering and keyboard up/down filtering in the new multi variable value selector dropdown, #1144

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

public/app/features/dashboard/partials/variableValueSelect.html

@@ -9,12 +9,13 @@
 <div ng-if="selectorOpen" class="variable-value-dropdown">
 	<div class="variable-search-wrapper">
 		<span style="position: relative;">
-			<input type="text" placeholder="Search values..." give-focus="giveFocus" tabindex="1" ng-model="query.query" spellcheck='false' ng-change="search()" />
+			<input type="text" placeholder="Search values..." ng-keydown="keyDown($event)" give-focus="giveFocus" tabindex="1" ng-model="search.query" spellcheck='false' ng-change="queryChanged()" />
 		</span>
 	</div>
 
 	<div class="variable-options-container" ng-if="!query.tagcloud">
-		<a class="variable-option pointer" bindonce ng-repeat="option in options" ng-class="{'selected': option.selected}" ng-click="optionSelected(option, $event)">
+		<a class="variable-option pointer" bindonce ng-repeat="option in search.options"
+				ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
 				<span >{{option.text}}</label>
 				<span class="fa fa-fw variable-option-icon"></span>
 			</div>

public/css/less/submenu.less

@@ -49,7 +49,7 @@
   display: block;
   padding: 0 8px;
 
-  &:hover {
+  &:hover, &.highlighted {
     background-color: @blueDark;
   }