[#3028] Followee dropdown on dashboard is now searchable via ajax

ckan/public/base/javascript/modules/dashboard.js

@@ -1,33 +1,54 @@
 this.ckan.module('dashboard', function ($, _) {
-
   return {
+    button: null,
+    popover: null,
+    searchTimeout: null,
     initialize: function () {
       $.proxyAll(this, /_on/);
-
-      var popover = $('#followee-filter .btn')
-        .on('click', function() {
-          var $this = $(this);
-          $this.toggleClass('active');
-          if ($this.hasClass('active')) {
-            setTimeout(function() {
-              $('input', $this.data('popover').tip()).focus();
-            }, 100);
-          }
-          return false;
-        }).
+      this.button = $('#followee-filter .btn').
+        on('click', this._onShowFolloweeDropdown).
         popover({
           placement: 'bottom',
           title: 'Filter',
           html: true,
           content: $('#followee-popover').html()
-        }).
-        data('popover').tip().addClass('popover-followee');
-
+        });
+      this.popover = this.button.data('popover').tip().addClass('popover-followee');
       if ($('.new', this.el)) {
         setTimeout(function() {
           $('.masthead .notifications').removeClass('notifications-important').html('0');
         }, 1000);
       }
+    },
+    _onInitSearch: function() {
+      var input = $('input', this.popover);
+      if (!input.hasClass('inited')) {
+        input.
+          on('keyup', this._onSearchKeyUp).
+          addClass('inited');
+      }
+      input.focus();
+    },
+    _onSearchKeyUp: function() {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = setTimeout(this._onSearchKeyUpTimeout, 300);
+    },
+    _onSearchKeyUpTimeout: function(e) {
+      var input = $('input', this.popover);
+      var q = input.val().toLowerCase();
+      if (q) {
+        $('li', this.popover).hide();
+        $('li.everything, [data-search^="' + q + '"]', this.popover).show();
+      } else {
+        $('li', this.popover).show();
+      }
+    },
+    _onShowFolloweeDropdown: function() {
+      this.button.toggleClass('active');
+      if (this.button.hasClass('active')) {
+        setTimeout(this._onInitSearch, 100);
+      }
+      return false;
     }
   };
 });

ckan/templates/user/snippets/followee_dropdown.html

@@ -23,14 +23,14 @@
     </div>
     {% if followees %}
       <ul class="nav nav-pills nav-stacked">
-        <li{% if context.selected_id == False %} class="active"{% endif %}>
+        <li class="everything {% if context.selected_id == False %} active{% endif %}">
           <a href="{{ h.url_for(controller='user', action='dashboard') }}">
             <i class="icon-star"></i>
             <span>Everything</span>
           </a>
         </li>
         {% for followee in followees %}
-        <li{% if context.selected_id == followee.dict.id %} class="active"{% endif %}>
+        <li{% if context.selected_id == followee.dict.id %} class="active"{% endif %} data-search="{{followee.display_name|lower}}">
           <a href="{{ h.url_for(controller='user', action='dashboard', type=followee.type, name=followee.dict.name) }}">
             {{followee_icon(followee.type)}}
             <span>{{followee.display_name}}</span>