Merge pull request darylrowland#28 from leejsinclair/feature/auto-hid…

…e-on-blur

UX behaviour for hiding search results on blur and selecting text on mouseup

angucomplete.js

@@ -24,13 +24,14 @@ angular.module('angucomplete', [] )
             "minLengthUser": "@minlength",
             "matchClass": "@matchclass"
         },
-        template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}"/><div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown"><div class="angucomplete-searching" ng-show="searching">Searching...</div><div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)">No results found</div><div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}"><div ng-if="imageField" class="angucomplete-image-holder"><img ng-if="result.image && result.image != \'\'" ng-src="{{result.image}}" class="angucomplete-image"/><div ng-if="!result.image && result.image != \'\'" class="angucomplete-image-default"></div></div><div class="angucomplete-title" ng-if="matchClass" ng-bind-html="result.title"></div><div class="angucomplete-title" ng-if="!matchClass">{{ result.title }}</div><div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div></div></div></div>',
+        template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}" onmouseup="this.select();" ng-focus="resetHideResults()" ng-blur="hideResults()" /><div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown"><div class="angucomplete-searching" ng-show="searching">Searching...</div><div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)">No results found</div><div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}"><div ng-if="imageField" class="angucomplete-image-holder"><img ng-if="result.image && result.image != \'\'" ng-src="{{result.image}}" class="angucomplete-image"/><div ng-if="!result.image && result.image != \'\'" class="angucomplete-image-default"></div></div><div class="angucomplete-title" ng-if="matchClass" ng-bind-html="result.title"></div><div class="angucomplete-title" ng-if="!matchClass">{{ result.title }}</div><div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div></div></div></div>',
 
         link: function($scope, elem, attrs) {
             $scope.lastSearchTerm = null;
             $scope.currentIndex = null;
             $scope.justChanged = false;
             $scope.searchTimer = null;
+            $scope.hideTimer = null;
             $scope.searching = false;
             $scope.pause = 500;
             $scope.minLength = 3;
@@ -133,9 +134,20 @@ angular.module('angucomplete', [] )
                             });
                     }
                 }
-
             }
 
+            $scope.hideResults = function() {
+                $scope.hideTimer = $timeout(function() {
+                    $scope.showDropdown = false;
+                }, $scope.pause);
+            };
+
+            $scope.resetHideResults = function() {
+                if($scope.hideTimer) {
+                    $timeout.cancel($scope.hideTimer);
+                };
+            };
+
             $scope.hoverRow = function(index) {
                 $scope.currentIndex = index;
             }