Geek Answers Handbook

How to make autocomplete just like google hint in angular ui-select

I use angular ui-select for autocomplete. When the user starts typing, I want to show the best suitable element as a watermark, and when the user clicks the tab, it should be selected (similar to google hint)

See also image. you can see that when you type “auto”, “complete” is displayed as a watermark, and if I issue a TAB, it will be selected.

Google auto suggest

+4
source share
2 answers

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

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 example

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

, , ui-items.

+3

angular -ui select library... REST - .... . CSS. , , URL: https://github.com/angular-ui/ui-select

+1

More articles:


All Articles