如何在angular ui-select中像谷歌自动建议一样进行自动完成 [英] How to make an autocomplete just like google auto suggest in angular ui-select

问题描述

我使用 angular ui-select 进行自动完成.当用户开始输入时，我想将最匹配的项目显示为水印，当用户按下 Tab 时，它应该被选中(与谷歌自动建议相同)

I am using angular ui-select for autocomplete. When the user start typing, I want to show the best matching item as watermarked, and when the user press tab, it should be selected (same like google auto suggest)

也请看图片.你可以看到，当我输入自动"时，完成"显示为水印，如果我按 TAB，它将被选中.

Please see the image also. you can see that, when I type 'auto' 'complete' is shown as watermark and if I pres TAB, it will be selected.

推荐答案

有一个凉亭插件autocompletelikegoogle并且您可以创建一个 angular 指令来在您的应用程序中呈现自动完成输入.

there are a bower plugin autocompletelikegoogle and you can create an angular directive to render an autocomplete input in your application.

指令.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 的属性中设置.

The variable list contains an array of your possible results in autocomplete input, is set in the atribute called ui-items.

这篇关于如何在angular ui-select中像谷歌自动建议一样进行自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！