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

Question

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

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

我尝试了两种自动完成方法,但它们只是显示有关键入的数据.当我们输入下拉列表中没有任何数据显示时.喜欢这个指令

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

dev*_*033 5

首先,你应该在他们的github上阅读他们对模块的看法:

注意:我不再主动保留此存储库.我现在开始使用ReactJS,与AngularJS相比,它呼吸新鲜空气.如果您仍在使用Angular并且需要自动完成组件,我建议您查看原始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"
     }
  ];
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我希望它有所帮助.

您可以在此处查看更多示例.

归档时间：	10 年，2 月前
查看次数：	28369 次
最近记录：	10 年，2 月前