#1: IT'S ALIVE!

public/templates/directives/search.html

@@ -1,7 +1,7 @@
 <div class="search" ng-blur="searchInProgress = false">
-    <input class="search-input" type="text" placeholder="Search&hellip;" ng-model="searchQuery" ng-keyup="quickSearch()" pfm-popup="search-results" />
+    <input class="search-input" type="text" placeholder="Search&hellip;" ng-model="searchQuery" pfm-popup="search-results" />
 
-    <div class="search-results pfm-popup" id="search-results" ng-show="searchInProgress">
+    <div class="search-results pfm-popup" id="search-results">
         <h3 class="-section-header">Matching tracks</h3>
         <pfm-tracks-list tracks="tracks"></pfm-tracks-list>
 

resources/assets/scripts/app/directives/popup.coffee

@@ -29,10 +29,11 @@ angular.module('ponyfm').directive 'pfmPopup', () ->
         open = false
 
 
-        documentClickHandler = () ->
+        documentClickHandler = (event) ->
             return if !open
             $popup.removeClass 'open'
             open = false
+            return true
 
         calculatePosition = ->
             $popup.parents().each () ->
@@ -79,7 +80,7 @@ angular.module('ponyfm').directive 'pfmPopup', () ->
             e.preventDefault()
             e.stopPropagation()
 
-            if open
+            if open and not $element.is(':focus')
                 open = false
                 $popup.removeClass 'open'
                 return

resources/assets/scripts/app/directives/search.coffee

@@ -24,7 +24,7 @@ angular.module('ponyfm').directive 'pfmSearch', () ->
     controller: [
         '$scope', 'search'
         ($scope, search) ->
-            $scope.searchQuery = null
+            $scope.searchQuery = ''
             $scope.searchInProgress = false
 
             $scope.tracks = []
@@ -33,27 +33,31 @@ angular.module('ponyfm').directive 'pfmSearch', () ->
             $scope.users = []
 
             clearResults = ()->
-                $scope.tracks = []
-                $scope.albums = []
-                $scope.playlists = []
-                $scope.users = []
+                $scope.tracks.length = 0
+                $scope.albums.length = 0
+                $scope.playlists.length = 0
+                $scope.users.length = 0
 
-            $scope.quickSearch = ()->
-                clearResults()
-                $scope.searchInProgress = true
 
-                search.searchAllContent($scope.searchQuery)
-                    .done (results)->
-                        for track in results.tracks
-                            $scope.tracks.push(track)
+            $scope.$watch 'searchQuery', _.debounce((searchQuery)->
+                $scope.$apply ()->
+                    clearResults()
+                    return if searchQuery.length <3
 
-                        for album in results.albums
-                            $scope.albums.push(album)
+                    $scope.searchInProgress = true
 
-                        for playlist in results.playlists
-                            $scope.playlists.push(playlist)
+                    search.searchAllContent(searchQuery)
+                        .then (results)->
+                            for track in results.tracks
+                                $scope.tracks.push(track)
 
-                        for user in results.users
-                            $scope.users.push(user)
+                            for album in results.albums
+                                $scope.albums.push(album)
 
+                            for playlist in results.playlists
+                                $scope.playlists.push(playlist)
+
+                            for user in results.users
+                                $scope.users.push(user)
+            , 500)
     ]

resources/assets/scripts/app/services/search.coffee

@@ -26,6 +26,9 @@ angular.module('ponyfm').factory('search', [
                     .success (results)->
                         searchDef.resolve(results.results)
 
+                    .error (response)->
+                        searchDef.reject(response)
+
                 searchDef.promise()
 
         self