angularjs - 具有自动完成功能的 Angular 下拉菜单

标签 angularjs autocomplete

我正在使用 Bootstrap 和 Angularjs。我的页面中有很多下拉菜单,我想实现这些功能,因为应该有一个文本框,它在焦点上显示数组中的数据,在输入时显示自动完成功能。

我尝试了 2 种自动完成方法,但它们只显示输入数据。当我们什么都不输入时,下拉列表中的数据不显示。喜欢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>

这只显示打字数据,我想要一个 在焦点上列出并在键入时自动完成。请为此建议一种方法或 Angular 或 Bootstrap 。

最佳答案

首先,您应该已经阅读了他们在他们的 github 上对他们的模块的评价:

NOTE: I no longer actively mantain this repository. I've started using ReactJS now and its a breath of fresh air compared to AngularJS. If you're still using Angular and need a autocomplete component I'd encourage you to look at this fork of my original Angucomplete: angucomplete-alt

要使用模块,您只需做一些我已经做过的修改,它似乎可以按您预期的那样工作。

片段:

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 .

关于angularjs - 具有自动完成功能的 Angular 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38203311/

相关文章:

angularjs - 可使用 ngrepeat : automatically editing the latest added item 进行编辑

javascript - 在 JavaScript 和 Angular 中动态地将变量插入到对象路径中

angularjs - 在 AngularJS 中使用 Passport oauth 和 JWT

Angular PrimeNG 自动完成 : Displaying multiple fields?

javascript - Google maps Places API V3 自动完成 - 输入时选择第一个选项

javascript - Node 总是返回空数组

angularjs - Angular UI Bootstrap - 弹出日期选择器

php - 有没有办法让 PhpStorm 的自动完成 "go deeper"?

javascript - 使用 ng-autocomplete 时默认值未预填充输入字段

ASP.NET jQuery AutoComplete - 第一次搜索后文本框没有响应