Question

我有一个带文字类型的输入框：

<input type="text></input>

我有一个名单：

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

现在让它只有2。当我输入v时，它应显示vishnu作为建议。当我输入se, it should show seenu`作为建议时。怎么能实现这一目标？

Answer 1

使用$scope.employees datalist填充data-ng-repeat的选项：

＆＃13;

var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
  $scope.employees = [{
      name: "vishnu"
    },
    {
      name: "seenu"
    }];
  });

＆＃13;

<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>

＆＃13;

祝你好运！

Answer 2

下面给出了Jquery自动完成

的简单示例

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

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

Answer 3

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>

文本框中的建议可能吗？

3 个答案: