How to implement Autocomplete TextBox using AngularJS?

Question

I have a text field, while i start typing, the predefined words should come for selecting.

 <input type="text"></input>

i have a list of items. only that should show. how to make it work? controller follows.

 angular.module('starter.controllers', [])
          .controller('AppCtrl', function($scope, $ionicModal, $timeout, authService, $state, $http,$ionicLoading)
        {
          $scope.loginSubmitted = false;
       $scope.myflag = false;
        $scope.User = {};
       $scope.toast = function(){
       $ionicLoading.show({
       template: 'wrong credentials'
   });
     $timeout(function() {
       $ionicLoading.hide();
   }, 1000);
     }

         $scope.doLogin = function() {

     $scope.loginSubmitted = true;
   $scope.loginstatus==0;
     authService.GetByUsername().success(function(data) {
     $scope.UserData = data;
    console.log($scope.UserData);
    for (var i = 0; i < $scope.UserData.length; i++) {
      if ($scope.UserData[i].UserName == $scope.User.UserName && $scope.UserData[i].Password == $scope.User.Password) {

        $scope.loginstatus=1;
        break;
      }
    }
    if($scope.loginstatus==1){
      $state.go('app.single')
    }
    else {
        console.log('wrong credentials');
        $scope.toast();
      }
  }).error(function(err) {
    console.log(err);
  });
}
}).controller('PlaylistsCtrl', function($scope) {

 }).controller('EmployeeCntrl', function($scope, $stateParams) {

    $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"];

     $scope.data = {};

     //$scope.data.date = new Date().toDateString();
   $scope.data.FromDate = new Date();
   $scope.employees = [{name: "vishnu"}, {name: "seenu"}];

  $scope.selectedEmployee = $scope.employees[0].name;

  $scope.projects = [{name: "crwhy"}, {name: "big in"}];
     $scope.selectedProject = $scope.projects[0].name;
     $scope.logdata = function(form) {
    console.log($scope.data);
  }
});

now can u do it as per requirement?

Answer 1

You can use Select2 library.

for example:

var app = angular.module('myApp', []);
app.controller('listCtrl', function($scope) {
  $scope.selectedItem;
    $scope.list = [
  {value:"AL",name:"Alabama"},{value:"WY",name:"Wyoming"}
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<div ng-app="myApp" data-ng-controller="listCtrl">

<select style="width:200px" class="select2" data-ng-model="selectedItem" data-ng-options="item.name for item in list">
 
</select>
  </div>

<script>
$( document ).ready(function() {
    $(".select2").select2();
  
});
</script>

Answer 2

You have several plugins for it :- http://ngmodules.org/modules/ngAutocomplete

i have something simple with a directive :-

Controller Coding :-

function DefaultCtrl($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"];
}

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

html :-

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

Use as resources http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css https://code.angularjs.org/1.0.0/angular-1.0.0.js

Fiddle :-

http://jsfiddle.net/sebmade/swfjT/