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   lt input auto-complete ui-items  names  ng-init  manualcat  no category entered   ng-model  manualcat  gt     So  how do I piece this all together correctly the Angular way

User · Answer

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.

User · Answer

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   lt  doctype html gt   lt html ng-app  plunker  gt       lt head gt           lt script src  http   ajax googleapis com ajax libs angularjs 1 0 5 angular js  gt  lt  script gt           lt script src  http   angular-ui github io bootstrap ui-bootstrap-tpls-0 4 0 js  gt  lt  script gt           lt script src  example js  gt  lt  script gt           lt link href    netdna bootstrapcdn com twitter-bootstrap 2 3 1 css bootstrap-combined min css  rel  stylesheet  gt       lt  head gt       lt body gt           lt div class  container-fluid  ng-controller  TypeaheadCtrl  gt               lt pre gt Model    selected  json   lt  pre gt               lt pre gt   states   lt  pre gt               lt input type  text  ng-change  onedit    ng-model  selected  typeahead  state for state in states   filter  viewValue  gt           lt  div gt       lt  body gt   lt  html gt    JS  angular module  plunker     ui bootstrap      function TypeaheadCtrl  scope       scope selected   undefined     scope states           scope onedit   function         scope states            for var i   0  i  lt  Math floor  Math random   10  1   i           var value              for var j   0  j  lt  i  j             value    j                 scope states push value

User · Answer

I found this link helpful    scope loadSkillTags   function  query    var data    qData  query      return SkillService querySkills data  then function response       return response data

User · Answer

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

User · Answer

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

[angularjs] Angularjs autocomplete from $http

Examples related to angularjs

Examples related to autocomplete

Examples related to directive

Examples related to angular-http