Best IT Recipes

Angularjs autocomplete from $ http

I am trying to write an autocomplete directive that retrieves data from a server using a $ http request (without using any external plugins or scripts) . Currently, it only works with static data. Now I know that I need to insert my $ http request into the source: directive, but I cannot find good documentation on this.

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 get Angular together?

+60
angularjs autocomplete directive
Aug 27 '13 at 8:16
source share
5 answers

I made an autocomplete directive and uploaded it to GitHub. It should also be able to process data from an HTTP request.

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

Thus, you should return a promise when you want to receive data from an HTTP request that will be resolved when loading data. Therefore, you must enter the $q service / directive / controller where you send 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; }

Hope this helps.

+44
Dec 19 '13 at 17:00
source

Use angular -ui-bootstrap typehead .

He had excellent support for $ http and promises. In addition, it does not include any jQuery at all, pure AngularJS.

(I always prefer to use existing libraries, and if they lack something to open a problem or pull out a request, it's much better than creating your own again)

+36
Oct 07 '13 at 14:24
source

You need to write a controller with the ng-change function in scope. In the ng-change callback, you make a server call and complete the upgrade. Here is the stub (without $http , as it is 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.imtqy.com/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); } } }
+16
Aug 27 '13 at 17:34
source

The easiest way to do this in angular or angularjs without external modules or directives is to use an HTML5 list and datalist. You just get json and use ng-repeat to supply options to the datalist. Json you can get from ajax.

in this example:

  • ctrl.query is the query that you enter as you type.
  • ctrl.msg is the message that appears in the placeholder
  • ctrl.dataList is the extracted json

then you can add filters and orderby in 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: This is native HTML5, but be aware of the browser and version. check this out: https://caniuse.com/#search=datalist .

+5
Jul 10 '17 at 13:20
source

I found this link useful

 $scope.loadSkillTags = function (query) { var data = {qData: query}; return SkillService.querySkills(data).then(function(response) { return response.data; }); };
0
Jul 12 '16 at 3:33
source


More articles:


All Articles