Question

我正在使用Angularjs的bootstrap。我的页面中有很多下拉菜单，并希望实现功能，因为应该有一个文本框，焦点显示数组中的数据，键入时显示自动完成功能。

我尝试了两种自动完成方法，但它们只显示了输入数据。当我们输入下拉列表中没有任何数据显示时。比如This Directive

<angucomplete id="ex1" placeholder="Select Nationality" selectedobject="std.NATIONALITY_ID" localdata="nationalities"    searchfields="description" titlefield="description" minlength="1"   inputclass="form-control form-control-small"/>
    </div>

这显示了只有我想要的打字数据焦点列表和键入时自动完成。请为此建议一种方法或角度或引导。

Answer 1

首先，你应该在他们的github上阅读他们对模块所说的内容：

注意：我不再主动维护此存储库。我现在开始使用ReactJS，与AngularJS相比，它呼吸新鲜空气。如果您仍在使用Angular并需要自动完成组件，我建议您查看原始Angucomplete的这个分支：angucomplete-alt

要使用 new 模块，您只需要做一些我已经做过的修改，它似乎按预期工作。

<强>段：

var app = angular.module('app', ['angucomplete-alt']);

app.controller('mainCtrl', function($scope) {
  $scope.selectedObj = {};
  $scope.nationalities = [  
     {
        "NATIONALITY_ID": 1,
        "description":"Afghan"
     },
     {  
        "NATIONALITY_ID": 2,
        "description":"Andorran"
     },
     {  
        "NATIONALITY_ID": 3,
        "description":"Botswanan"
     },
     {  
        "NATIONALITY_ID": 4,
        "description":"Brazilian"
     },
     {  
        "NATIONALITY_ID": 5,
        "description":"Canadian"
     },
     {
        "NATIONALITY_ID": 6,
        "description":"Cypriot"
     }
  ];
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angucomplete-alt/2.4.1/angucomplete-alt.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <angucomplete-alt id="ex1"
    placeholder="Select Nationality"
    selected-object="selectedObj"
    local-data="nationalities"
    search-fields="description"
    title-field="description"
    minlength="1"
    inputclass="form-control form-control-small"
    match-class="highlight" />
</body>

</html>

我希望它有所帮助。

您可以查看更多示例here。

Answer 2

我希望此链接可以帮助您进行自动填充下拉菜单：http://embed.plnkr.co/jBJkDb但是它使用了ui-select请注意。

具有自动完成功能的角度下拉列表

2 个答案: