implemeting auto-complete using pure angularjs without any dependency

Question

UPDATE: I have come to realized that below code is using jQuery-UI and in my requirement I'm suppose to work without any 3rd party dependencies.

so to rephrase my question, how can i change or convert the below code to use just native angularjs rather than using jQuery-ui?

I'm sorry if this is confused to @Roberto Linares & @risto

I have searched and found this directive and I think its light-weight its working as expected if you go to the below jsfiddle but as soon as I changed the version of angularjs to 1.2x (which currently using in my project) getting this error:

TypeError: undefined is not a function
    at http://localhost:54893/scripts/directives/auto-complete.js:3:19
iElement.autocomplete({  <<<<ERROR

here is my code:

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


<input auto-complete ui-items="names" ng-model="selected">
    selected = {{selected}}

http://jsfiddle.net/sebmade/swfjT/light/ also I have noticed that in jsfiddle its using Jquery UI is that a dependency on this directive? if you know any light-weight directive please let me know as well..

AngularJS directive with 1.2 version: http://jsfiddle.net/abuhamzah/zx8twm2w/ (not working)

Thanks.

In your not working example you are missing the jQuery UI dependency. — Roberto Linares
– Roberto Linares, Commented Dec 17, 2014 at 14:47
yes I'm aware of that; so do I have to have jQuery UI dependency? — Nick Kahn
– Nick Kahn, Commented Dec 17, 2014 at 14:48
update my jsfiddle jsfiddle.net/abuhamzah/zx8twm2w/1 with jquery ui still does not work, note i am using 1.2 ver of angularjs — Nick Kahn
– Nick Kahn, Commented Dec 17, 2014 at 14:49
You do, because the autocomplete function you are calling is part of jquery UI, not part of Angular. That's why Angular says that the function is undefined if you don't include jQuery UI. — Roberto Linares
– Roberto Linares, Commented Dec 17, 2014 at 14:51
You should load jquery and jquery ui before loading angularjs. Check this working fiddle with Angular 1.2 — Roberto Linares
– Roberto Linares, Commented Dec 17, 2014 at 15:02

Santosh Kumar · Accepted Answer · 2017-02-27 06:16:15Z

4

No need to create directive, just use below code.

Html:

<input type="text" class="form-control autocomplete" ng-model="selected" typeahead="state for state in states | filter:$viewValue">

Add this code in your controller :

$scope.selected = undefined;
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois'];

Working Example : https://jsfiddle.net/0y3ntj4x/23/

edited Feb 27, 2017 at 6:16

answered Jan 13, 2016 at 9:10

Santosh Kumar

1,88715 silver badges21 bronze badges

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

5 Comments

Mohan Gopi Over a year ago

can you please send a working demo for this question

Santosh Kumar Over a year ago

@MohanGopi you can below code in angularJs controller: app.controller('appcontroller', function($scope){$scope.selected = undefined; $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois'];})

Santosh Kumar Over a year ago

Yes You need to call ui-bootstrap-tpls-X.XX.XX.js(ui-bootstrap-tpls-0.13.4.js i have used for above demo) which is mixed of bootstrap and angularJS

Prasanna Over a year ago

for angular 4 how to run it? will you provide better solution?

Santosh Kumar Over a year ago

@PrasannaSasne please find the working example based on angular 4.XX As below : demo.vickram.me/angular-auto-complete/#!#simple-list . i suggest you to use [ npm install angular-auto-complete ] for download the repo files ... i hope it will be helpful for you

Dev QuickLS · Accepted Answer · 2017-03-24 18:43:29Z

you can use below concept to use this features:

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid">
                Country Name <input type="text" class="form-control autocomplete" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
            </div>
        </form>
    </div>
</div>



 angular.module('myApp', ['ui.bootstrap'])
        .controller("mainCtrl", function ($scope) {
      //  $scope.selected = {id:'0',address:'Type 3 Letters'};
       $scope.selected = undefined;
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois'];
    });

https://jsfiddle.net/0y3ntj4x/23/

risto · Accepted Answer · 2017-02-27 17:37:53Z

Update: This solution is with jquery ui, based on the poster's original question. See the other answer for an HTML5 solution

Later versions of angular complained that DefaultCtrl was undefined. I fixed it though:

var app = angular.module('MyModule', []);
app.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
}).controller('DefaultCtrl', function ($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
});

Here is the fiddle.

I'm not sure what you have changed but I do have DefaultCtrl in this version but with 1.2 version angulajs check this out jsfiddle.net/abuhamzah/zx8twm2w
In angular there's an 'angular world' and non-angular world. You need to register the controller with angular. The equivalent from my code would be something like: .controller('DefaultCtrl', DefaultCtrl)
I think that using JQuery UI with Angular is not the good way to go, how can i remove the jquery ui dependency?
I dont think this works without jquery-ui.. I hate such answers. Wannabee people trying to get reputation.

Collectives™ on Stack Overflow

implemeting auto-complete using pure angularjs without any dependency

3 Answers 3

5 Comments

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

4 Comments

Related