Fix typeahead to avoid generating new backend request on each keypress. (#10596)

* Fix typeahead to not generate new request on each keypress.

* Change to debounce method

public/app/core/components/query_part/query_part_editor.ts

@@ -123,11 +123,11 @@ export function queryPartEditorDirective($compile, templateSrv) {
         });
         });
 
 
         var typeahead = $input.data('typeahead');
         var typeahead = $input.data('typeahead');
-        typeahead.lookup = function() {
+        typeahead.lookup = _.debounce(function() {
           this.query = this.$element.val() || '';
           this.query = this.$element.val() || '';
           var items = this.source(this.query, $.proxy(this.process, this));
           var items = this.source(this.query, $.proxy(this.process, this));
           return items ? this.process(items) : items;
           return items ? this.process(items) : items;
-        };
+        }, 500);
       }
       }
 
 
       $scope.showActionsMenu = function() {
       $scope.showActionsMenu = function() {

public/app/core/directives/metric_segment.js

@@ -129,11 +129,11 @@ function (_, $, coreModule) {
         $input.typeahead({ source: $scope.source, minLength: 0, items: 10000, updater: $scope.updater, matcher: $scope.matcher });
         $input.typeahead({ source: $scope.source, minLength: 0, items: 10000, updater: $scope.updater, matcher: $scope.matcher });
 
 
         var typeahead = $input.data('typeahead');
         var typeahead = $input.data('typeahead');
-        typeahead.lookup = function () {
+        typeahead.lookup = _.debounce(function() {
           this.query = this.$element.val() || '';
           this.query = this.$element.val() || '';
           var items = this.source(this.query, $.proxy(this.process, this));
           var items = this.source(this.query, $.proxy(this.process, this));
           return items ? this.process(items) : items;
           return items ? this.process(items) : items;
-        };
+        }, 500);
 
 
         $button.keydown(function(evt) {
         $button.keydown(function(evt) {
           // trigger typeahead on down arrow or enter key
           // trigger typeahead on down arrow or enter key