Delay filter until user stops typing

app/assets/javascripts/dashboard.js.coffee

 class @Dashboard
   constructor: ->
-    new ProjectsList()
+    ProjectsList.init()

app/assets/javascripts/issues.js.coffee

@@ -45,7 +45,7 @@
 
   filterResults: =>
     form = $("#issue_search_form")
-    search = $("#issue_search").val()
+    search = $("#projects-list-filter").val()
     $('.issues-holder').css("opacity", '0.5')
     issues_url = form.attr('action') + '?' + form.serialize()
 

app/assets/javascripts/projects_list.js.coffee

-class @ProjectsList
-  constructor: ->
+@ProjectsList =
+  init: ->
     $(".projects-list .js-expand").on 'click', (e) ->
       e.preventDefault()
       list = $(this).closest('.projects-list')
       list.find("li").show()
       list.find("li.bottom").hide()
+    this.initSearch()
 
-    $(".projects-list-filter").keyup ->
-      terms = $(this).val()
-      uiBox = $('div.projects-list-holder')
-      filterSelector = $(this).data('filter-selector') || 'span.filter-title'
+  initSearch: ->
+    @timer = null
+    $("#projects-list-filter").keyup ->
+      clearTimeout(@timer)
+      @timer = setTimeout(ProjectsList.filterResults, 500)
 
-      $('.projects-list-holder').css("opacity", '0.5')
-      form = $("#project-list-form")
-      project_filter_url = form.attr('action') + '?' + form.serialize()
-      $.ajax
-        type: "GET"
-        url: form.attr('action')
-        data: form.serialize()
-        complete: ->
-          $('.projects-list-holder').css("opacity", '1.0')
-        success: (data) ->
-          $('.projects-list-holder').html(data.html)
-          # Change url so if user reload a page - search results are saved
-          history.replaceState {page: project_filter_url}, document.title, project_filter_url
-        dataType: "json"
-      uiBox.find("ul.projects-list li.bottom").hide()
+  filterResults: =>
+    form = $("#project-list-form")
+    search = $("#issue_search").val()
+    uiBox = $('div.projects-list-holder')
+
+    $('.projects-list-holder').css("opacity", '0.5')
+
+    project_filter_url = form.attr('action') + '?' + form.serialize()
+    $.ajax
+      type: "GET"
+      url: form.attr('action')
+      data: form.serialize()
+      complete: ->
+        $('.projects-list-holder').css("opacity", '1.0')
+      success: (data) ->
+        $('.projects-list-holder').html(data.html)
+        # Change url so if user reload a page - search results are saved
+        history.replaceState {page: project_filter_url}, document.title, project_filter_url
+      dataType: "json"
+    uiBox.find("ul.projects-list li.bottom").hide()

app/assets/javascripts/user.js.coffee

 class @User
   constructor: ->
     $('.profile-groups-avatars').tooltip("placement": "top")
-    new ProjectsList()
+    ProjectsList.init()
 
     $('.hide-project-limit-message').on 'click', (e) ->
       path = '/'

app/views/dashboard/_projects_head.html.haml

@@ -15,7 +15,7 @@
   .nav-controls
     = form_tag '', method: :get, class: 'project-list-form', id: 'project-list-form' do |f|
       .append-right-10.hidden-xs.hidden-sm
-        = search_field_tag :filter_projects, params[:filter_projects], placeholder: 'Filter by name...', class: 'projects-list-filter form-control issue_search search-text-input', spellcheck: false, id: 'projects-list-filter'
+        = search_field_tag :filter_projects, params[:filter_projects], placeholder: 'Filter by name...', class: 'projects-list-filter form-control search-text-input', spellcheck: false, id: 'projects-list-filter'
         - if current_user.can_create_project?
           = link_to new_project_path, class: 'btn btn-new' do
             = icon('plus')

app/views/dashboard/projects/_projects.html.haml

@@ -3,4 +3,4 @@
   = render 'shared/projects/list', ci: true
 
   :javascript
-    new ProjectsList();
+    ProjectsList.init()