CODEWITHSUNDEEP
javascriptangularjstwitter-bootstraptypeahead
kir
kir

Reputation: 55

Async typeahead in Angular.JS do not show options

I looked at the official article and sample about Async typeahead. After I simplified and stubbed it and used in my project. 

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', 

 function($scope, $http) {

  $scope.placeHolder = "Choose";
  $scope.displayPath = "Name";
  $scope.typeaheadminlen = 3;
  // Any function returning a promise object can be used to load values   asynchronously
  $scope.loadOptions = function(val) {
    var stub = [{ Name: "fuuuu" }, { Name: "baaar" }];
    if (!$scope.selected)
        return [];
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: "aa",
        sensor: false
      }
    })
    .then(function(response){
      return stub;
    });
  };
});

http://plnkr.co/edit/o4ly4vYJdGCwHk62tN2j?p=preview

This code works good enough on plunker, but not in my project. Somehow it worked only few times. Other times I saw only glyphicon-refresh, but options has not appeared. Breakpoint says that I got my return stub; correctly. Versions of Angular.JS and Bootstrap in plunker matches with versions in my project. Any ideas what I could miss?

P.S. Scope and сontent of div-tag was perfectly copied between project and plunker.

Upvotes: 0

Views: 1149

Answers (3)

Aquiles
Aquiles

Reputation: 867

The typeahead works on an input element. When the input loose focus, then ui-boostrap-tpls.js does not execute some part of the code as says @kir.

If you have a directive that removes focus from the autocomplete input, or if you have an spinner component to show an icon while AJAX request are executed, it will probably take away the focus from the autocomplete input.

In my particular case, I use angular-block-ui, and I fixed the situation, removing the blocking behaviour from blocking:

// Tell the blockUI service to ignore certain requests
blockUIConfig.requestFilter = function(config) {
  // If the request starts with '/api/quote' ...
  if(config.url.match(/^.*MyMethod.*/)) {
    return false; // ... don't block it.
  }
};

Upvotes: 3

Nitin Singh
Nitin Singh

Reputation: 160

Please find the working solution for it:

HTML PART:

    <!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
  <script src="script.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
  <pre>{{selected.name}}</pre>
  <input autocomplete="off"  
         ng-model="selected" 
         placeholder="Item Name"
         type="text"
         typeahead="item as item.name for item in data | filter:$viewValue" />
</body>
</html>

Script Part:

    var app = angular.module('plunker',  ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.data = [{id:1,name:"google"}, {id:2, name:"microsoft"},{id:3, name:"ibm"},
  {id:4, name:"cisco"},{id:5, name:"apple"}
,{id:6, name:"nokia"},{id:7, name:"bing"},{id:8, name:"mango"}
];
  $scope.selected = {id:1, name:"google"};
  $scope.selected2 = {};
});

Working Plunker Link: Plunker

Upvotes: 0

kir
kir

Reputation: 55

It all was about hasFocus variable in ui-bootstrap-tpls.js and 'blur' event. For some reason the event happened every time, when autocomplete options was supposed appear. ui-bootstrap-tpls.js set hasFocus variable to false and it's cause a problem in getMatchesAsync function, because this function has follow condition: if (onCurrentRequest && hasFocus). So autocomplete options couldn't appear. I failed to find the reason of 'blur' event, so I just removed hasFocus from condition. I know, it is bad solution, but it's the best I could.

Upvotes: 1

Related Questions