我正在使用 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/