fixed blur event on FF adn chrome, fixed esc and tab key

Author: signalkuppe

README.md

@@ -10,15 +10,15 @@
 * Zero configuration setup for basic usage
 * Highlighted keyword in suggestions
 * Configurable label for suggestions
-* Close with esc key or blur
+* Close with esc key, blur or tab
 * Selection with enter key or click
 * No results message
 * UI indication during search
 * Advanced usage with custom templates
 
 ### Requirements
 
-* Boostrap
+* Bootstrap
 * Font awesome
 
 ### Basic usage
@@ -46,11 +46,10 @@ Place the autocomplete directive in your view
     btc-query="queryFunction" 
     btc-callback="callbackFunction"
     btc-noresults="No results!"
-    ng-model="city"></bootcomplete>  
+    ng-model="modelvariable"></bootcomplete>  
 ```
 
-Define in your controller the query function (you should return a promise) with the searchstring as a parameter
-In this example ENDPOINT is a factory
+Define in your controller the query function (you should return a promise) with the searchstring as a parameter. In this example ENDPOINT is a factory
 
 ```js
 $scope.queryFunction = function (searchstring) {
@@ -68,8 +67,8 @@ $scope.callbackFunction = function () {
 
 ### Advanced usage
 
-You can specify a custom template to display the suggestions using the results array
-Any boostrap/non-boostrap html is accepted, for example
+You can specify a custom template to display the suggestions using the results array. 
+Any bootstrap/non-boostrap html is accepted, for example
 
 ```html
 <div class="media" ng-repeat="result in results">
@@ -81,10 +80,13 @@ Any boostrap/non-boostrap html is accepted, for example
   <div class="media-body">
     <h4 class="media-heading">{{result.title}}</h4>
     {{result.text}}
+    <p><a href="" class="btc-clickLink" ng-click="select($index)"></a></p>
   </div>
 </div>
 ```
 
+classname "btc-clickLink" id required on any link that fires the selection.
+
 ### Options
 
 #### btc-minlength

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bootcomplete",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "authors": [
     "Matteo Leoni <leoni.matteo@gmail.com>"
   ],

dist/bootcomplete.min.js

@@ -1,6 +1,6 @@
 {
   "name": "bootcomplete",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A simple angular autocomplete made for bootstrap3",
   "main": "index.js",
   "scripts": {

package.json

@@ -18,15 +18,15 @@ directive('bootcomplete', ["$compile", "$templateRequest", "$timeout", "$sce", f
             btcCallback: '='
         },
         template: "<div class='input-group input-group-{{btcSize}}'>\n"+
-                  "<input placeholder='{{btcPlaceholder}}' type='text' class='form-control' ng-blur='blur($event)'/>\n"+
+                  "<input placeholder='{{btcPlaceholder}}' type='text' class='form-control' ng-blur='blur($event)' autocomplete=\"off\"/>\n"+
                   "<span class='input-group-addon'><i class='fa fa-refresh' ng-class=\"{'fa-spin': loading }\"></i></span>\n"+
                   "</div>",
         link: function (scope, element, attrs, controller) {
 
             var input = element[0].querySelector('.form-control'),
                 suggestionTemplate = "<ul class=\"dropdown-menu\" style=\"position:static;display:block;float:none;}\">\n"+
                                         "<li ng-class=\"{'active':selectedIndex === $index}\" ng-repeat=\"result in results\" ng-show=\"results.length\">\n"+
-                                           "<a ng-style=\"{'white-space':'normal'}\" href=\"\" ng-click=\"select($index)\" ng-bind-html=\"result.btclabel\"></a>\n"+
+                                           "<a class=\"btc-clickLink\" ng-style=\"{'white-space':'normal'}\" href=\"\" ng-click=\"select($index)\" ng-bind-html=\"result.btclabel\"></a>\n"+
                                         "</li>\n"+
                                         "<li class=\"disabled\" ng-hide=\"results.length\">\n"+
                                           "<a href=\"\">{{noresultsMsg}}</a>\n"+
@@ -41,26 +41,31 @@ directive('bootcomplete', ["$compile", "$templateRequest", "$timeout", "$sce", f
 
             // select item
             scope.select = function (index) {
-                if (!scope.btcTemplate){
+
+                if (!scope.btcTemplate)
                     delete scope.results[index].btclabel; // delete label from object
-                }
+
                 element.controller('ngModel').$setViewValue(scope.results[index]);
                 scope.btcCallback.call();
                 scope.close();
             };
 
             // close autocomplete 
             scope.close = function () {
-                input.value = '';
-                scope.selectedIndex = -1;
                 scope.visible = false;
+                scope.selectedIndex = -1;
+                input.value = '';
             };
 
             // close on blur
-            scope.blur = function (event) {
-                // close only if the blur target is not a suggestion
-                if (!event.relatedTarget)
+            scope.blur = function (e) {
+                setTimeout(function(){
+                   var focused = document.activeElement;
+                   if(focused.tagName!=='A' && focused.className.indexOf('btc-clickLink')===-1) {
                     scope.close();
+                    scope.$apply();
+                   }// check the elemnt with focus
+                },1);
             };
 
             // append element to the DOM
@@ -123,8 +128,8 @@ directive('bootcomplete', ["$compile", "$templateRequest", "$timeout", "$sce", f
                     if (scope.selectedIndex != -1)
                         scope.select(scope.selectedIndex);
                 }
-                //esc
-                if (e.keyCode === 27) {
+                //esc or tab
+                if (e.keyCode === 27 || e.keyCode === 9) {
                     scope.close();
                 }
 

src/bootcomplete.js

@@ -9,7 +9,7 @@
             </div>
             <div class="media-body">
                 <div class="pull-right">
-                    <a href="" class="btn btn-sm btn-default" ng-click="select($index)">Read More...</a>
+                    <a href="" class="btn btn-sm btn-default btc-clickLink" ng-click="select($index)">Read More...</a>
                 </div>
                 <h5 class="media-heading">{{result.weather[0].description}} </h5>
                 <span>{{result.main.temp}}°C  {{result.main.humidity}}%</span>