J'ai une zone de saisie avec du texte type:

<input type="text></input>

J'ai une liste de noms:

 $scope.employees = [{
    name: "vishnu"
 }, {
    name: "seenu"
 }];

Maintenant, que ce soit seulement 2. Lorsque je tape v, il devrait afficher vishnu comme suggestion. Lorsque je tape se, it should show seenu` comme suggestion. Comment cela peut il etre accompli?

3
vishnuprasad kv 7 mars 2016 à 08:24

3 réponses

Meilleure réponse

Remplissez les options de datalist avec des valeurs dans $scope.employees avec data-ng-repeat :

var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
  $scope.employees = [{
      name: "vishnu"
    },
    {
      name: "seenu"
    }];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <input type="text" list="names" placeholder="Pick a name..">
  <datalist id="names">
    <option  data-ng-repeat="item in employees" value="{{item.name}}">
  </datalist>  
</div>

Bonne chance!

6
Andriy Ivaneyko 7 mars 2016 à 06:14
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
  $scope.employees = [{
      name: "vishnu"
    },
    {
      name: "seenu"
    }];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <input type="text" list="names" placeholder="Pick a name..">
  <datalist id="names">
    <option  data-ng-repeat="item in employees" value="{{item.name}}">
  </datalist>  
</div>
0
vishnuprasad kv 7 mars 2016 à 07:10

Il y a un exemple simple donné ci-dessous avec la saisie semi-automatique de Jquery

$scope.complete=function(){
    $( "#tags" ).autocomplete({
      source: $scope.availableTags
    });
    } 
  });

http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=preview

0
Mohammed Dawood Ansari 7 mars 2016 à 05:33