Simple Angularjs Autocomplete Directive Example

Today, We want to share with you angularjs autocomplete directive example.In this post we will show you angularjs autocomplete dropdown, hear for autocomplete in angularjs we will give you demo and example for implement.In this post, we will learn about Simple AutoComplete AngularJS with an example.

AngularJS autocomplete directive example

here we are learn to simply step by step Autocomplete In Angularjs Using Directive And Factory example with demo.

HTML Code

Setp 1: index.html
AngularJS autocomplete directive in a modal Demo

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>angularjs autocomplete textbox - www.pakainfo.com</title>
  <link rel="stylesheet" href="style.css"> 
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
  <script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>

</head>

<body> 
  <script>
    angular.module('Infinityknow', ['Infinityknow.directives', 'ui.bootstrap']);
 
    function InfinityknowParamsCtrl($scope, $modal) {

      $scope.open = function() {

        $modal.open({
            templateUrl: 'ModalContent.html',
            backdrop: true, 
            windowClass: 'modal',
            controller: function($scope, $modalInstance) {
              $scope.arrival_station = {
                "id": 0,
                "name": ""
              };
              
              $scope.productList = function(startsWith, response) {
                response([{
                    id: "7017",
                    "name": "Samsung f41"
                  }, {
                    "id": "7164",
                    "name": "Lenova z570"
                  }, {
                    "id": "7089",
                    "name": "Dell A584 CDG"
                  }, {
                    "id": "7126",
                    "name": "Iphone 7"
                  }, {
                    "id": "3543",
                    "name": "Computer"
                  }, {
                    "id": "3542",
                    "name": "Car i10"
                  },

                ]);

              };

            }
        });
      }
    }  
            InfinityknowParamsCtrl.$inject = ['$scope','$modal'];

            angular.module('Infinityknow.directives', [])
              .directive('autocomplete', function($parse) {
                return {
                  restrict: 'E',
                  replace: true,
                  template: '<input type="text"/>',
                  link: function(scope, element, attrs) {
                    scope.$watch(attrs.selection, function(selection) {
                      // event when select item
                      element.on("autocompleteselect", function(e, ui) {
                        e.preventDefault(); // prevent the "value" being written back after we've done our own changes
                        this.value = ui.item.name;
                      });

                      element.autocomplete({
                        source: scope.productList,
                        select: function(event, ui) {
                          scope.$apply(function() {
                            $parse(attrs.selection)
                              .assign(scope, {
                                name: ui.item.name,
                                id: ui.item.id,
                              });
                          });
                        }
                      }) // to display name instead of default label attribute
                      .data("ui-autocomplete")._renderItem = function(ul, item) {
                        return $("<li></li>")
                          .data("item.autocomplete", item)
                          .append("<a>" + item.name + "</a>")
                          .appendTo(ul);
                      };


                    });
                  }
                };
              });
  </script>
  <div ng-app="Infinityknow" ng-controller="InfinityknowParamsCtrl">

 
    <button class="btn primary blue" ng-click="open();">Open modal</button>
    <script type="text/ng-template" id="ModalContent.html">
       
      <autocomplete placeholder="Enter destination"
      style="width:100%" selection="selection" source="productList" / >
      {{$scope.arrival_station.id}}

    </script>


  </div>
</body>

</html>

style.css

Styles go here

.blue {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  background: rgb(66, 184, 221);
  font-size: 125%;
  margin: 40px;
}

.ui-autocomplete {
    z-index: 1051; /* z-index of modal is equal to 1050. */
}

I hope you get an idea about ng-autocomplete angularjs example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  Ng-Options to Bind DropdownList using Angular Example

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *