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:  Angular Add & Get Custom Attribute Value

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  ng-mousemove Event using Angular Example
  2. Read Also:  Custom Filter using Angular Example
  3. Read Also:  Angular 6 Form Validation Example Tutorial
  4. Read Also:  Angular 6 HTTPClient GET Request Example
  5. Read Also:  ng-cut ng-copy ng-paste Events using Angular Example
  6. Read Also:  Form Radio Button with Angular Material(mat radio button)
  7. Read Also:  Angular 9/8 Material Checkbox Examples
  8. Read Also:  FontSpace Web Application Icons
  9. Read Also:  How to add class using Angularjs?
  10. Read Also:  Custom Filter using Angular Example