How to make an autocomplete just like google auto suggest in angular ui-select

Question

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)

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.

Answer 1

there are a bower plugin autocompletelikegoogle and you can create an angular directive to render an 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 use example

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

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

Answer 2

Use angular-ui select library...It will make REST call to get data from backend systems for autocomplete dropdown....and for watermark..You can change it through CSS. for library please find URL:https://github.com/angular-ui/ui-select