Angular autocomplete with search filter

Question

How can I have the autocomplete feature in Angular combined with search filter?

This is my code using search filter my problem is I want to add a autocomplete feature.

JS code

angular.module('sortApp', [])

    .controller('mainController', function($scope) {
     $scope.sortType     = 'country'; // set the default sort type
     $scope.sortReverse  = false;  // set the default sort order
     $scope.searchCountry   = '';     // set the default search/filter term


  $scope.countries = [
    { country: 'Austria', smallmediumbusiness: '+43-720-880296', enterprise: '0800006482', countryClass:'at'},
    { country: 'Belgium', smallmediumbusiness: '+32-78480136', enterprise: '080049411', countryClass:'be'},
    { country: 'Bulgaria', smallmediumbusiness: '+359-24917167', enterprise: '00800-115-1013', countryClass:'bg'},
    { country: 'Croatia', smallmediumbusiness: '', enterprise: '0800-7534', countryClass:'hr'},
    { country: 'Czech Republic', smallmediumbusiness: '+420-228880035', enterprise: '800-408-884', countryClass:'cz'},
    { country: 'Denmark', smallmediumbusiness: '+45-89880568', enterprise: '80888039', countryClass:'dk'},
    { country: 'Estonia', smallmediumbusiness: '+372-8801898', enterprise: '800-0100-199', countryClass:'ee'},
    { country: 'Finland', smallmediumbusiness: '+358-942597807', enterprise: '0800114334', countryClass:'fi'},
    { country: 'France', smallmediumbusiness: '+33176686572', enterprise: '0805636251', countryClass:'fr'},
    { country: 'Germany', smallmediumbusiness: '+33176686572', enterprise: '08005893734', countryClass:'de'},
    { country: 'Hungary', smallmediumbusiness: '+36-18088424', enterprise: '0680015552', countryClass:'hu'},
    { country: 'Iceland', smallmediumbusiness: '', enterprise: '8009078', countryClass:'is'},
    { country: 'Ireland', smallmediumbusiness: '+33176686572', enterprise: '08005893734', countryClass:'ie'}
  ];

});

HTML

<input class="form-control" id="tags" type="search" ng-model="searchCountry" placeholder="Type your country to search" required="" style="margin-bottom:10px; margin-left: -16px;"/>


 <tr ng-repeat="view in countries | orderBy:sortType:sortReverse | filter:searchCountry">
                         <td class="{{view.countryClass}}">{{ view.country }}</td>
                         <td>{{ view.smallmediumbusiness }}</td>
                         <td>{{ view.enterprise }}</td>
                   </tr>

Thank you in advance.

Answer 1

I'd suggest you to use angular-ui#typeahead.

You just need to import this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script>

And to inject it in your module:

angular
  .module('sortApp', ['ngAnimate', 'ui.bootstrap'])

See it working:

(function() {
  angular
    .module('sortApp', ['ngAnimate', 'ui.bootstrap'])
    .controller('mainController', mainController);
    
    mainController.$inject = ['$scope'];
    
    function mainController($scope) {
      $scope.countries = [  
         {  
            "country":"Austria",
            "smallmediumbusiness":"+43-720-880296",
            "enterprise":"0800006482",
            "countryClass":"at"
         },
         {  
            "country":"Belgium",
            "smallmediumbusiness":"+32-78480136",
            "enterprise":"080049411",
            "countryClass":"be"
         },
         {  
            "country":"Bulgaria",
            "smallmediumbusiness":"+359-24917167",
            "enterprise":"00800-115-1013",
            "countryClass":"bg"
         },
         {  
            "country":"Croatia",
            "smallmediumbusiness":"",
            "enterprise":"0800-7534",
            "countryClass":"hr"
         },
         {  
            "country":"Czech Republic",
            "smallmediumbusiness":"+420-228880035",
            "enterprise":"800-408-884",
            "countryClass":"cz"
         },
         {  
            "country":"Denmark",
            "smallmediumbusiness":"+45-89880568",
            "enterprise":"80888039",
            "countryClass":"dk"
         },
         {  
            "country":"Estonia",
            "smallmediumbusiness":"+372-8801898",
            "enterprise":"800-0100-199",
            "countryClass":"ee"
         },
         {  
            "country":"Finland",
            "smallmediumbusiness":"+358-942597807",
            "enterprise":"0800114334",
            "countryClass":"fi"
         },
         {  
            "country":"France",
            "smallmediumbusiness":"+33176686572",
            "enterprise":"0805636251",
            "countryClass":"fr"
         },
         {  
            "country":"Germany",
            "smallmediumbusiness":"+33176686572",
            "enterprise":"08005893734",
            "countryClass":"de"
         },
         {  
            "country":"Hungary",
            "smallmediumbusiness":"+36-18088424",
            "enterprise":"0680015552",
            "countryClass":"hu"
         },
         {  
            "country":"Iceland",
            "smallmediumbusiness":"",
            "enterprise":"8009078",
            "countryClass":"is"
         },
         {  
            "country":"Ireland",
            "smallmediumbusiness":"+33176686572",
            "enterprise":"08005893734",
            "countryClass":"ie"
         }
      ];
    }
})();

<!doctype html>
<html ng-app="sortApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-controller="mainController">
  <div class="col-md-12">
    <input type="text" ng-model="selected" uib-typeahead="c.country for c in countries | filter:$viewValue | limitTo:8" class="form-control">
    <pre ng-bind-template="Model: {{selected | json}}"></pre>
  </div>
</body>

</html>