带有自动完成功能的 Angular 下拉菜单答案

【问题标题】：Angular dropdown with autocomplete带有自动完成功能的 Angular 下拉菜单
【发布时间】：2020-06-25 15:46:46
【问题描述】：

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

这仅显示我想要的输入数据列出焦点并在打字时自动完成。请为此建议一种方法或角度或引导程序。

【问题讨论】：

标签： angularjs autocomplete

【解决方案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。

【讨论】：

谢谢。我有几个问题。 1) 当键入完全匹配并且使用 tab 键输入失去焦点时，所选对象似乎是正确的并且匹配该对象。但是，当提交按钮时输入丢失时，例如被单击，则在完全匹配后未成功设置所选对象。 2）可以手动设置指令的ng-model吗？如何访问 searchStr ng-model？提前致谢！

【解决方案2】：

我希望这个链接对你自动完成下拉菜单有帮助：http://embed.plnkr.co/jBJkDb 但它使用的是 ui-select 请注意。

【讨论】：

他正在寻找一种方法来使用他正在使用的模块。