Update droplab

app/assets/javascripts/droplab/droplab.js

@@ -53,6 +53,7 @@ Object.assign(DropDown.prototype, {
     this.list.addEventListener('click', function(e) {
       // climb up the tree to find the LI
       var selected = utils.closest(e.target, 'LI');
+
       if(selected) {
         e.preventDefault();
         self.hide();
@@ -158,17 +159,22 @@ require('./window')(function(w){
       this.ready = false;
       this.hooks = [];
       this.queuedData = [];
-      this.plugins = [];
       this.config = {};
+      this.loadWrapper;
       if(typeof hook !== 'undefined'){
         this.addHook(hook);
       }
-      this.addEvents();
     };
 
+
     Object.assign(DropLab.prototype, {
-      plugin: function (plugin) {
-        this.plugins.push(plugin)
+      load: function() {
+        this.loadWrapper();
+      },
+
+      loadWrapper: function(){
+        var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']'));
+        this.addHooks(dropdownTriggers).init();
       },
 
       addData: function () {
@@ -181,6 +187,14 @@ require('./window')(function(w){
         this.applyArgs(args, '_setData');
       },
 
+      destroy: function() {
+        this.hooks.forEach(function(h){
+          h.destroy();
+        });
+        this.hooks = [];
+        this.removeEvents();
+      },
+
       applyArgs: function(args, methodName) {
         if(this.ready) {
           this[methodName].apply(this, args);
@@ -210,7 +224,7 @@ require('./window')(function(w){
 
       addEvents: function() {
         var self = this;
-        window.addEventListener('click', function(e){
+        this.windowClickedWrapper = function(e){
           var thisTag = e.target;
           if(thisTag.tagName === 'LI' || thisTag.tagName === 'A'
              || thisTag.tagName === 'BUTTON'){
@@ -222,10 +236,16 @@ require('./window')(function(w){
           self.hooks.forEach(function(hook) {
             hook.list.hide();
           });
-        });
+        }.bind(this);
+        w.addEventListener('click', this.windowClickedWrapper);
+      },
+
+      removeEvents: function(){
+        w.removeEventListener('click', this.windowClickedWrapper);
+        w.removeEventListener('load', this.loadWrapper);
       },
 
-      changeHookList: function(trigger, list) {
+      changeHookList: function(trigger, list, plugins, config) {
         trigger = document.querySelector('[data-id="'+trigger+'"]');
         list = document.querySelector(list);
         this.hooks.every(function(hook, i) {
@@ -234,19 +254,16 @@ require('./window')(function(w){
             hook.list.list.innerHTML = hook.list.initialState;
             hook.list.hide();
 
-            hook.trigger.removeEventListener('mousedown', hook.events.mousedown);
-            hook.trigger.removeEventListener('input', hook.events.input);
-            hook.trigger.removeEventListener('keyup', hook.events.keyup);
-            hook.trigger.removeEventListener('keydown', hook.events.keydown);
+            hook.destroy();
             this.hooks.splice(i, 1);
-            this.addHook(trigger, list);
+            this.addHook(trigger, list, plugins, config);
             return false;
           }
           return true
         }.bind(this));
       },
 
-      addHook: function(hook, list) {
+      addHook: function(hook, list, plugins, config) {
         if(!(hook instanceof HTMLElement) && typeof hook === 'string'){
           hook = document.querySelector(hook);
         }
@@ -256,17 +273,17 @@ require('./window')(function(w){
         
         if(hook) {
           if(hook.tagName === 'A' || hook.tagName === 'BUTTON') {
-            this.hooks.push(new HookButton(hook, list));
+            this.hooks.push(new HookButton(hook, list, plugins, config));
           } else if(hook.tagName === 'INPUT') {
-            this.hooks.push(new HookInput(hook, list));
+            this.hooks.push(new HookInput(hook, list, plugins, config));
           }
         }
         return this;
       },
 
-      addHooks: function(hooks) {
+      addHooks: function(hooks, plugins, config) {
         hooks.forEach(function(hook) {
-          this.addHook(hook, null);
+          this.addHook(hook, null, plugins, config);
         }.bind(this));
         return this;
       },
@@ -276,9 +293,7 @@ require('./window')(function(w){
       },
 
       init: function () {
-        this.plugins.forEach(function(plugin) {
-          plugin(DropLab);
-        })
+        this.addEvents();
         var readyEvent = new CustomEvent('ready.dl', {
           detail: {
             dropdown: this,
@@ -301,15 +316,18 @@ require('./window')(function(w){
 },{"./constants":1,"./custom_event_polyfill":2,"./hook_button":6,"./hook_input":7,"./utils":10,"./window":11}],5:[function(require,module,exports){
 var DropDown = require('./dropdown');
 
-var Hook = function(trigger, list){
+var Hook = function(trigger, list, plugins, config){
   this.trigger = trigger;
   this.list = new DropDown(list);
   this.type = 'Hook';
   this.event = 'click';
+  this.plugins = plugins || [];
+  this.config = config || {};
   this.id = trigger.dataset.id;
 };
 
 Object.assign(Hook.prototype, {
+
   addEvents: function(){},
 
   constructor: Hook,
@@ -321,31 +339,61 @@ module.exports = Hook;
 var CustomEvent = require('./custom_event_polyfill');
 var Hook = require('./hook');
 
-var HookButton = function(trigger, list) {
-  Hook.call(this, trigger, list);
+var HookButton = function(trigger, list, plugins, config) {
+  Hook.call(this, trigger, list, plugins, config);
   this.type = 'button';
   this.event = 'click';
   this.addEvents();
+  this.addPlugins();
 };
 
 HookButton.prototype = Object.create(Hook.prototype);
 
 Object.assign(HookButton.prototype, {
+  addPlugins: function() {
+    this.plugins.forEach(function(plugin) {
+      plugin.init(this);
+    });
+  },
+
+  clicked: function(e){
+    var buttonEvent = new CustomEvent('click.dl', {
+      detail: {
+        hook: this,
+      },
+      bubbles: true,
+      cancelable: true
+    });
+    this.list.show();
+    e.target.dispatchEvent(buttonEvent);
+  },
+
   addEvents: function(){
-    var self = this;
-    this.trigger.addEventListener('click', function(e){
-      var buttonEvent = new CustomEvent('click.dl', {
-        detail: {
-          hook: self,
-        },
-        bubbles: true,
-        cancelable: true
-      });
-      self.list.show();
-      e.target.dispatchEvent(buttonEvent);
+    this.clickedWrapper = this.clicked.bind(this);
+    this.trigger.addEventListener('click', this.clickedWrapper);
+  },
+
+  removeEvents: function(){
+    this.trigger.removeEventListener('click', this.clickedWrapper);
+  },
+
+  restoreInitialState: function() {
+    this.list.list.innerHTML = this.list.initialState;
+  },
+
+  removePlugins: function() {
+    this.plugins.forEach(function(plugin) {
+      plugin.destroy();
     });
   },
 
+  destroy: function() {
+    this.restoreInitialState();
+    this.removeEvents();
+    this.removePlugins();
+  },
+
+
   constructor: HookButton,
 });
 
@@ -356,18 +404,26 @@ module.exports = HookButton;
 var CustomEvent = require('./custom_event_polyfill');
 var Hook = require('./hook');
 
-var HookInput = function(trigger, list) {
-  Hook.call(this, trigger, list);
+var HookInput = function(trigger, list, plugins, config) {
+  Hook.call(this, trigger, list, plugins, config);
   this.type = 'input';
   this.event = 'input';
+  this.addPlugins();
   this.addEvents();
 };
 
 Object.assign(HookInput.prototype, {
+  addPlugins: function() {
+    var self = this;
+    this.plugins.forEach(function(plugin) {
+      plugin.init(self);
+    });
+  },
+
   addEvents: function(){
     var self = this;
 
-    function mousedown(e) {
+    this.mousedown = function mousedown(e) {
       var mouseEvent = new CustomEvent('mousedown.dl', {
         detail: {
           hook: self,
@@ -379,7 +435,7 @@ Object.assign(HookInput.prototype, {
       e.target.dispatchEvent(mouseEvent);
     }
 
-    function input(e) {
+    this.input = function input(e) {
       var inputEvent = new CustomEvent('input.dl', {
         detail: {
           hook: self,
@@ -392,11 +448,11 @@ Object.assign(HookInput.prototype, {
       self.list.show();
     }
 
-    function keyup(e) {
+    this.keyup = function keyup(e) {
       keyEvent(e, 'keyup.dl');
     }
 
-    function keydown(e) {
+    this.keydown = function keydown(e) {
       keyEvent(e, 'keydown.dl');
     }
 
@@ -416,15 +472,38 @@ Object.assign(HookInput.prototype, {
     }
 
     this.events = this.events || {};
-    this.events.mousedown = mousedown;
-    this.events.input = input;
-    this.events.keyup = keyup;
-    this.events.keydown = keydown;
-    this.trigger.addEventListener('mousedown', mousedown);
-    this.trigger.addEventListener('input', input);
-    this.trigger.addEventListener('keyup', keyup);
-    this.trigger.addEventListener('keydown', keydown);
+    this.events.mousedown = this.mousedown;
+    this.events.input = this.input;
+    this.events.keyup = this.keyup;
+    this.events.keydown = this.keydown;
+    this.trigger.addEventListener('mousedown', this.mousedown);
+    this.trigger.addEventListener('input', this.input);
+    this.trigger.addEventListener('keyup', this.keyup);
+    this.trigger.addEventListener('keydown', this.keydown);
   },
+
+  removeEvents: function(){
+    this.trigger.removeEventListener('mousedown', this.mousedown);
+    this.trigger.removeEventListener('input', this.input);
+    this.trigger.removeEventListener('keyup', this.keyup);
+    this.trigger.removeEventListener('keydown', this.keydown);
+  },
+
+  restoreInitialState: function() {
+    this.list.list.innerHTML = this.list.initialState;
+  },
+
+  removePlugins: function() {
+    this.plugins.forEach(function(plugin) {
+      plugin.destroy();
+    });
+  },
+
+  destroy: function() {
+    this.restoreInitialState();
+    this.removeEvents();
+    this.removePlugins();
+  }
 });
 
 module.exports = HookInput;
@@ -433,21 +512,14 @@ module.exports = HookInput;
 var DropLab = require('./droplab')();
 var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
 var keyboard = require('./keyboard')();
-
 var setup = function() {
-  var droplab = DropLab();
-  require('./window')(function(w) {
-    w.addEventListener('load', function() {
-      var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']'));
-      droplab.addHooks(dropdownTriggers).init();
-    });
-  });
-  return droplab;
+  window.DropLab = DropLab;
 };
 
+
 module.exports = setup();
 
-},{"./constants":1,"./droplab":4,"./keyboard":9,"./window":11}],9:[function(require,module,exports){
+},{"./constants":1,"./droplab":4,"./keyboard":9}],9:[function(require,module,exports){
 require('./window')(function(w){
   module.exports = function(){
     var currentKey;
@@ -557,7 +629,7 @@ var camelize = function(str) {
 };
 
 var closest = function(thisTag, stopTag) {
-  while(thisTag !== null && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
+  while(thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
     thisTag = thisTag.parentNode;
   }
   return thisTag;

app/assets/javascripts/droplab/droplab_ajax.js

 /* eslint-disable */
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 /* global droplab */
-droplab.plugin(function init(DropLab) {
-  var _addData = DropLab.prototype.addData;
-  var _setData = DropLab.prototype.setData;
 
-  var _loadUrlData = function(url) {
-    return new Promise(function(resolve, reject) {
-      var xhr = new XMLHttpRequest;
-      xhr.open('GET', url, true);
-      xhr.onreadystatechange = function () {
-        if(xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            var data = JSON.parse(xhr.responseText);
-            return resolve(data);
-          } else {
-            return reject([xhr.responseText, xhr.status]);
+require('../window')(function(w){
+  w.droplabAjax = {
+    _loadUrlData: function _loadUrlData(url) {
+      return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest;
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function () {
+          if(xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+              var data = JSON.parse(xhr.responseText);
+              return resolve(data);
+            } else {
+              return reject([xhr.responseText, xhr.status]);
+            }
           }
-        }
-      };
-      xhr.send();
-    });
-  };
-
-  Object.assign(DropLab.prototype, {
-    addData: function(trigger, data) {
-      this.processData(trigger, data, _addData);
-    },
-    setData: function(trigger, data) {
-      this.processData(trigger, data, _setData);
+        };
+        xhr.send();
+      });
     },
-    processData: function(trigger, data, methodName) {
-      var _this = this;
-      if('string' === typeof data) {
-        _loadUrlData(data).then(function(d) {
-          methodName.call(_this, trigger, d);
-        }).catch(function(e) {
-          if(e.message)
-            console.error(e.message, e.stack); // eslint-disable-line no-console
-          else
-            console.error(e); // eslint-disable-line no-console
-        })
-      } else {
-        methodName.apply(this, arguments);
+
+    init: function init(hook) {
+      var config = hook.config.droplabAjax;
+
+      if (!config || !config.endpoint || !config.method) {
+        return;
       }
+
+      if (config.method !== 'setData' && config.method !== 'addData') {
+        return;
+      }
+
+      this._loadUrlData(config.endpoint).then(function(d) {
+        hook.list[config.method].call(hook.list, d);
+      }).catch(function(e) {
+        if(e.message) {
+          console.error(e.message, e.stack); // eslint-disable-line no-console
+        } else {
+          console.error(e); // eslint-disable-line no-console
+        }
+      });
     },
-  });
+
+    destroy: function() {
+    }
+  };
 });
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
 
 },{}]},{},[1])(1)
-});
+});
\ No newline at end of file

app/assets/javascripts/droplab/droplab_filter.js

 /* eslint-disable */
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.filter||(g.filter = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 /* global droplab */
-droplab.plugin(function init(DropLab) {
-  var keydown = function keydown(e) {
-    var list = e.detail.hook.list;
-    var data = list.data;
-    var value = e.detail.hook.trigger.value.toLowerCase();
-    var config = droplab.config[e.detail.hook.id];
-    var matches = [];
-    // will only work on dynamically set data 
-    // and if a config text property is set
-    if(!data || (!config.hasOwnProperty('text') && !config.hasOwnProperty('filter'))){
-      return;
-    }
 
-    var filterFunction = function(o){
-      // cheap string search
-      o.droplab_hidden = o[config.text].toLowerCase().indexOf(value) === -1;
-      return o;
-    };
+require('../window')(function(w){
+  w.droplabFilter = {
 
-    if (config.hasOwnProperty('filter') && config.filter !== undefined) {
-      filterFunction = config.filter;
-    }
+    keydownWrapper: function(e){
+        var list = e.detail.hook.list;
+        var data = list.data;
+        var value = e.detail.hook.trigger.value.toLowerCase();
+        var config = e.detail.hook.config.droplabFilter;
+        var matches = [];
+        var filterFunction;
+        // will only work on dynamically set data
+        if(!data){
+          return;
+        }
+
+        if (config && config.filterFunction && typeof config.filterFunction === 'function') {
+          filterFunction = config.filterFunction;
+        } else {
+          filterFunction = function(o){
+            // cheap string search
+            o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
+            return o;
+          };
+        }
+
+        matches = data.map(function(o) {
+          return filterFunction(o, value);
+        });
+        list.render(matches);
+    },
+
+    init: function init(hookInput) {
+      var config = hookInput.config.droplabFilter;
 
-    matches = data.map(function(o) {
-      return filterFunction(o, value);
-    });
-    list.render(matches);
-  }
-  window.addEventListener('keyup.dl', keydown);
+      if (!config || (!config.template && !config.filterFunction)) {
+        return;
+      }
+
+      this.hookInput = hookInput;
+      this.hookInput.trigger.addEventListener('keyup.dl', this.keydownWrapper);
+    },
+
+    destroy: function destroy(){
+      this.hookInput.trigger.removeEventListener('keyup.dl', this.keydownWrapper);
+    }
+  };
 });
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
 },{}]},{},[1])(1)
 });
\ No newline at end of file

app/assets/javascripts/filtered_search/dropdown_assignee.js.es6

@@ -3,8 +3,8 @@
 
 ((global) => {
   class DropdownAssignee extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-assignee';
     }
 
@@ -20,8 +20,13 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=');
+      // TODO: Pass elements instead of querySelectors
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-assignee', [droplabAjax], {
+        droplabAjax: {
+          endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=',
+          method: 'setData',
+        }
+      });
     }
 
     filterMethod(item, query) {

app/assets/javascripts/filtered_search/dropdown_author.js.es6

@@ -3,8 +3,8 @@
 
 ((global) => {
   class DropdownAuthor extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-author';
     }
 
@@ -16,8 +16,13 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=');
+      // TODO: Pass elements instead of querySelectors
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-author', [droplabAjax], {
+        droplabAjax: {
+          endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=',
+          method: 'setData',
+        }
+      });
     }
 
     filterMethod(item, query) {

app/assets/javascripts/filtered_search/dropdown_hint.js.es6

@@ -21,10 +21,9 @@
   }];
 
   class DropdownHint extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input, filterKeyword) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-hint';
-      this.filterKeyword = filterKeyword;
     }
 
     itemClicked(e) {
@@ -39,8 +38,13 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, dropdownData);
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-hint', [droplabFilter], {
+        droplabFilter: {
+          template: 'hint',
+          filterFunction: this.filterMethod,
+        }
+      });
+      this.droplab.setData(this.hookId, dropdownData);
     }
 
     filterMethod(item, query) {
@@ -54,6 +58,14 @@
 
       return item;
     }
+
+    configure() {
+      this.droplab.addHook(this.input, this.dropdown, [droplabFilter], {
+        droplabFilter: {
+          template: 'hint',
+        }
+      }).init();
+    }
   }
 
   global.DropdownHint = DropdownHint;

app/assets/javascripts/filtered_search/dropdown_label.js.es6

@@ -3,9 +3,10 @@
 
 ((global) => {
   class DropdownLabel extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-label';
+      this.filterSymbol = '~';
     }
 
     itemClicked(e) {
@@ -21,20 +22,17 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, 'labels.json');
-    }
-
-    filterMethod(item, query) {
-      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
-      const valueWithoutColon = value.slice(1).toLowerCase();
-      const valueWithoutPrefix = valueWithoutColon.slice(1);
-
-      const title = item.title.toLowerCase();
-      const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1;
-
-      item.droplab_hidden = noTitleMatch;
-      return item;
+      // TODO: Pass elements instead of querySelectors
+      // TODO: Don't bind filterWithSymbol to (this), just pass the symbol
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-label', [droplabAjax, droplabFilter], {
+        droplabAjax: {
+          endpoint: 'labels.json',
+          method: 'setData',
+        },
+        droplabFilter: {
+          filterFunction: this.filterWithSymbol.bind(this),
+        }
+      });
     }
   }
 

app/assets/javascripts/filtered_search/dropdown_milestone.js.es6

@@ -3,9 +3,10 @@
 
 ((global) => {
   class DropdownMilestone extends gl.FilteredSearchDropdown {
-    constructor(dropdown, input) {
-      super(dropdown, input);
+    constructor(droplab, dropdown, input) {
+      super(droplab, dropdown, input);
       this.listId = 'js-dropdown-milestone';
+      this.filterSymbol = '%';
     }
 
     itemClicked(e) {
@@ -21,21 +22,16 @@
     }
 
     renderContent() {
-      super.renderContent();
-      droplab.setData(this.hookId, 'milestones.json');
-    }
-
-    filterMethod(item, query) {
-      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
-      const valueWithoutColon = value.slice(1).toLowerCase();
-      const valueWithoutPrefix = valueWithoutColon.slice(1);
-
-      const title = item.title.toLowerCase();
-
-      const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1;
-
-      item.droplab_hidden = noTitleMatch;
-      return item;
+      // TODO: Pass elements instead of querySelectors
+      this.droplab.changeHookList(this.hookId, '#js-dropdown-milestone', [droplabAjax, droplabFilter], {
+        droplabAjax: {
+          endpoint: 'milestones.json',
+          method: 'setData',
+        },
+        droplabFilter: {
+          filterFunction: this.filterWithSymbol.bind(this),
+        }
+      });
     }
   }
 

app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6

@@ -3,7 +3,8 @@
   const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
 
   class FilteredSearchDropdown {
-    constructor(dropdown, input) {
+    constructor(droplab, dropdown, input) {
+      this.droplab = droplab;
       this.hookId = 'filtered-search';
       this.input = input;
       this.dropdown = dropdown;
@@ -66,25 +67,11 @@
 
     destroy() {
       this.input.setAttribute(DATA_DROPDOWN_TRIGGER, '');
-      droplab.setConfig(this.getFilterConfig());
-      droplab.setData(this.hookId, []);
+      this.droplab.setConfig(this.getFilterConfig());
+      this.droplab.setData(this.hookId, []);
       this.unbindEvents();
     }
 
-    show() {
-      const currentHook = this.getCurrentHook();
-      if (currentHook) {
-        currentHook.list.show();
-      }
-    }
-
-    hide() {
-      const currentHook = this.getCurrentHook();
-      if (currentHook) {
-        currentHook.list.hide();
-      }
-    }
-
     dismissDropdown() {
       this.input.focus();
       // Propogate input change to FilteredSearchManager
@@ -111,30 +98,24 @@
     }
 
     getCurrentHook() {
-      return droplab.hooks.filter(h => h.id === this.hookId)[0];
+      return this.droplab.hooks.filter(h => h.id === this.hookId)[0];
     }
 
     renderContent() {
-      droplab.setConfig(this.getFilterConfig(this.filterKeyword));
+      // Overriden by dropdown sub class
     }
 
-    render(hide) {
+    render(forceRenderContent) {
       this.setAsDropdown();
 
       const firstTimeInitialized = this.getCurrentHook() === undefined;
 
-      if (firstTimeInitialized) {
+      if (firstTimeInitialized || forceRenderContent) {
         this.renderContent();
       } else if(this.getCurrentHook().list.list.id !== this.listId) {
-        droplab.changeHookList(this.hookId, `#${this.listId}`);
+        // this.droplab.changeHookList(this.hookId, `#${this.listId}`);
         this.renderContent();
       }
-
-      if (hide) {
-        this.hide();
-      } else {
-        this.show();
-      }
     }
 
     resetFilters() {
@@ -152,6 +133,29 @@
         }
       }
     }
+
+    hide() {
+      const currentHook = this.getCurrentHook();
+      if (currentHook) {
+        currentHook.list.hide();
+      }
+    }
+
+    filterWithSymbol(item, query) {
+      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
+      const valueWithoutColon = value.slice(1).toLowerCase();
+      const prefix = valueWithoutColon[0];
+      const valueWithoutPrefix = valueWithoutColon.slice(1);
+
+      const title = item.title.toLowerCase();
+
+      // Eg. this.filterSymbol = ~ for labels
+      const matchWithoutPrefix = prefix === this.filterSymbol && title.indexOf(valueWithoutPrefix) !== -1;
+      const match = title.indexOf(valueWithoutColon) !== -1;
+
+      item.droplab_hidden = !match && !matchWithoutPrefix;
+      return item;
+    }
   }
 
   global.FilteredSearchDropdown = FilteredSearchDropdown;

app/assets/javascripts/filtered_search/filtered_search_manager.js.es6

@@ -101,11 +101,18 @@
     }
 
     loadDropdown(dropdownName = '', hideDropdown) {
+      let firstLoad = false;
+      const filteredSearch = document.querySelector('.filtered-search');
+
+      if(!this.droplab) {
+        firstLoad = true;
+        this.droplab = new DropLab();
+      }
+
       dropdownName = dropdownName.toLowerCase();
 
       const filterIconPadding = 27;
       const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0];
-      const filteredSearch = document.querySelector('.filtered-search');
 
       if (!this.font) {
         this.font = window.getComputedStyle(filteredSearch).font;
@@ -116,34 +123,38 @@
 
         const dynamicDropdownPadding = 12;
         const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding + dynamicDropdownPadding;
+        const dropdownAuthorElement = document.querySelector('#js-dropdown-author');
+        const dropdownAssigneeElement = document.querySelector('#js-dropdown-assignee');
+        const dropdownMilestoneElement = document.querySelector('#js-dropdown-milestone');
+        const dropdownLabelElemenet = document.querySelector('#js-dropdown-label');
 
         this.dismissCurrentDropdown();
         this.currentDropdown = match.key;
 
         if (match.key === 'author') {
           if (!dropdownAuthor) {
-            dropdownAuthor = new gl.DropdownAuthor(document.querySelector('#js-dropdown-author'), filteredSearch);
+            dropdownAuthor = new gl.DropdownAuthor(this.droplab, dropdownAuthorElement, filteredSearch);
           }
 
           dropdownAuthor.setOffset(dropdownOffset);
           dropdownAuthor.render();
         } else if (match.key === 'assignee') {
           if (!dropdownAssignee) {
-            dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), filteredSearch);
+            dropdownAssignee = new gl.DropdownAssignee(this.droplab, dropdownAssigneeElement, filteredSearch);
           }
 
           dropdownAssignee.setOffset(dropdownOffset);
           dropdownAssignee.render();
         } else if (match.key === 'milestone') {
           if (!dropdownMilestone) {
-            dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), filteredSearch);
+            dropdownMilestone = new gl.DropdownMilestone(this.droplab, dropdownMilestoneElement, filteredSearch);
           }
 
           dropdownMilestone.setOffset(dropdownOffset);
           dropdownMilestone.render();
         } else if (match.key === 'label') {
           if (!dropdownLabel) {
-            dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), filteredSearch);
+            dropdownLabel = new gl.DropdownLabel(this.droplab, dropdownLabelElemenet, filteredSearch);
           }
 
           dropdownLabel.setOffset(dropdownOffset);
@@ -154,22 +165,29 @@
         console.log('🦄 load hint dropdown');
 
         const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding;
-        console.log(dropdownOffset)
+        const dropdownHintElement = document.querySelector('#js-dropdown-hint');
+
         this.dismissCurrentDropdown();
         this.currentDropdown = 'hint';
-
         if (!dropdownHint) {
-          dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), filteredSearch, this.currentDropdown);
+          dropdownHint = new gl.DropdownHint(this.droplab, dropdownHintElement, filteredSearch);
+        }
+
+        if (firstLoad) {
+          dropdownHint.configure();
         }
+
         dropdownHint.setOffset(dropdownOffset);
-        dropdownHint.render(hideDropdown);
+        dropdownHint.render(firstLoad);
       }
     }
 
     dismissCurrentDropdown() {
-      if (this.currentDropdown === 'hint') {
-        dropdownHint.destroy();
-      }
+      // if (this.currentDropdown === 'hint') {
+      //   dropdownHint.hide();
+      // } else if (this.currentDropdown === 'author') {
+      //   // dropdownAuthor.hide();
+      // }
     }
 
     setDropdown() {