Angularjs autocomplete from $http

Question

I'm trying to write an autocomplete directive that fetches data from the server using an $http request (without using any external plugins or scripts). Currently it works only with static data. Now, I know that I need to insert my $http request into the source: of the directive, but I can't find any good documentation on the subject.

http request

$http.post($scope.url, { "command": "list category() names"}). 
            success(function(data, status) {
                $scope.status = status;
                $scope.names = data;    
            })
            .
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;   
            });

Directive

app.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
        };
    });

View

<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">

So, how do I piece this all together correctly the Angular way?

Can you provide the full example source code? I just want to know at what time you actually make the HTTP call. Thanks in advance. — Matthias
– Matthias, Commented Jun 28, 2015 at 8:36
have you found the solution? i'm facing the same problem, seems like $scope.names is empty when directive is loaded, the ajax call is left behind — Agung Setiawan
– Agung Setiawan, Commented Nov 23, 2015 at 10:36

justGoscha · Accepted Answer · 2013-12-19 17:00:09Z

45

I made an autocomplete directive and uploaded it to GitHub. It should also be able to handle data from an HTTP-Request.

Here's the demo: http://justgoscha.github.io/allmighty-autocomplete/ And here the documentation and repository: https://github.com/JustGoscha/allmighty-autocomplete

So basically you have to return a promise when you want to get data from an HTTP request, that gets resolved when the data is loaded. Therefore you have to inject the $qservice/directive/controller where you issue your HTTP Request.

Example:

function getMyHttpData(){
  var deferred = $q.defer();
  $http.jsonp(request).success(function(data){
    // the promise gets resolved with the data from HTTP
    deferred.resolve(data);
  });
  // return the promise
  return deferred.promise;
}

I hope this helps.

answered Dec 19, 2013 at 17:00

justGoscha

24.1k16 gold badges52 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Metropolis Over a year ago

This is throwing an error for me on the template html file that you included in the download. Is this required? If so you may want to make that obvious in the documentation

tuxSlayer Over a year ago

Does it require all data to be fetched to memory? What if I have 10M+ variants? :)

Artiom Over a year ago

@tuxSlayer download first 20 what match your criteria

Ashish Gupta Over a year ago

any attribute to limit the no of results?

dotnethaggis Over a year ago

Does this have a timeout you can set, for example... do an http request once you've stopped typing for 1 second? I don't want it to make a request on every key pressed... @JustGoscha

|

Urigo · Accepted Answer · 2014-04-22 22:40:40Z

37

Use angular-ui-bootstrap's typehead.

It had great support for $http and promises. Also, it doesn't include any JQuery at all, pure AngularJS.

(I always prefer using existing libraries and if they are missing something to open an issue or pull request, much better then creating your own again)

edited Apr 22, 2014 at 22:40

answered Oct 7, 2013 at 14:24

Urigo

3,18523 silver badges27 bronze badges

3 Comments

Gidon Over a year ago

Thanks for the answer Urigo. But, like I said in my question, I'm trying to avoid using any external scripts. I'm looking for a pure angular solution. Cheers, Gidon

Rocco Over a year ago

keep in mind that as of today Typeahead in angular-ui-bootstrap ist not compatible with Angular 1.3

user254153 Over a year ago

How to get id on select.

madhead · Accepted Answer · 2013-08-27 17:34:39Z

17

You need to write a controller with ng-change function in scope. In ng-change callback you do a call to server and update completions. Here is a stub (without $http as this is a plunk):

HTML

<!doctype html>
<html ng-app="plunker">
    <head>
        <script src="http://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="example.js"></script>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>
        <div class='container-fluid' ng-controller="TypeaheadCtrl">
            <pre>Model: {{selected| json}}</pre>
            <pre>{{states}}</pre>
            <input type="text" ng-change="onedit()" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
        </div>
    </body>
</html>

JS

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

function TypeaheadCtrl($scope) {
  $scope.selected = undefined;
  $scope.states = [];

  $scope.onedit = function(){
    $scope.states = [];

    for(var i = 0; i < Math.floor((Math.random()*10)+1); i++){
      var value = "";

      for(var j = 0; j < i; j++){
        value += j;
      }
      $scope.states.push(value);
    }
  }
}

answered Aug 27, 2013 at 17:34

madhead

33.8k19 gold badges166 silver badges215 bronze badges

2 Comments

Gidon Over a year ago

Thanks for the answer madhead. But, like I said in my question, I'm trying to avoid using any external scripts. In your answer you are using the angular-ui bootstrap script. I'm looking for a pure angular solution. Cheers, Gidon

madhead Over a year ago

I'm using angular-ui for typeahead directive (autocomplete itself).

londox · Accepted Answer · 2017-09-04 15:04:23Z

the easiest way to do that in angular or angularjs without external modules or directives is using list and datalist HTML5. You just get a json and use ng-repeat for feeding the options in datalist. The json you can fetch it from ajax.

in this example:

ctrl.query is the query that you enter when you type.
ctrl.msg is the message that is showing in the placeholder
ctrl.dataList is the json fetched

then you can add filters and orderby in the ng-reapet

!! list and datalist id must have the same name !!

 <input type="text" list="autocompleList" ng-model="ctrl.query" placeholder={{ctrl.msg}}>
<datalist id="autocompleList">
        <option ng-repeat="Ids in ctrl.dataList value={{Ids}}  >
</datalist>

UPDATE : is native HTML5 but be carreful with the type browser and version. check it out : https://caniuse.com/#search=datalist.

Joe B · Accepted Answer · 2016-07-12 03:33:50Z

0

I found this link helpful

$scope.loadSkillTags = function (query) {
var data = {qData: query};
   return SkillService.querySkills(data).then(function(response) {
   return response.data;
  });
 };

answered Jul 12, 2016 at 3:33

Joe B

8088 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angularjs autocomplete from $http

http request

Directive

View

5 Answers 5

8 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

http request

Directive

View

5 Answers 5

8 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related