如何在Angular UI-Select中实现类似Google自动建议的自动完成功能

Question

我正在使用Angular UI-Select进行自动完成。当用户开始输入时，我希望最佳匹配项显示为水印，当用户按下Tab键时，应该被选中（与Google自动建议相同）。

请参见下图。您可以看到，当我输入“auto”时，“complete”显示为水印，如果我按TAB键，它将被选中。

- Jinto

Answer 1

有一个名为autocompletelikegoogle的bower插件，你可以创建一个Angular指令来在你的应用程序中渲染自动完成输入框。

Directive.js

angular.module('app').directive('autoComplete', [
  '$timeout', function($timeout) {
    return function(scope, element, attrs) {
      var auto;
      auto = function() {
        $timeout((function() {
          if (!scope[attrs.uiItems]) {
            auto();
          } else {
            element.autocomplete({
              source: [scope[attrs.uiItems]]
            });
          }
        }), 5);
      };
      return auto();
    };
  }
]);

HTML使用示例

<input type="text" auto-complete ui-items="list" ng-model="yourModel" class="form-control" placeholder="Tipe something" />

变量列表包含自动完成输入中可能的结果数组，设置在名为ui-items的属性中。

- nahualli

---

使用您提供的答案对我没用。我的模型变量只更新了部分子字符串，而不是完整的匹配项...有什么想法如何修复？请查看此处的 SO 问题 https://stackoverflow.com/questions/47203963/why-is-an-autocomplete-input-not-updating-the-model-correctly - SkyWalker

Answer 2

使用angular-ui select库...它将从后端系统获取数据以用于自动完成下拉菜单....而对于水印..您可以通过CSS进行更改。 有关库，请查找URL：https://github.com/angular-ui/ui-select

- chetanpawar

---

在ui-select中，如果您键入某些内容，它将在自动完成下拉列表中突出显示。但是，我找不到一个示例，在选择之前它会在文本字段本身中显示最佳匹配项，并将其显示为水印项。 - Jinto