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.

Solution 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.

Solution 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

Comments

[Jinto]

in ui-select, if you type something, it will highlight in the autocomplete dropdown. However, I couldnt find an example where it will show the best matched item in the text field itself even before selecting, and showing it as a watermarked item

[SkyWalker]

Using your answer doesn't work for me. My model variable is updated to only the partial substring that was typed and not to the full selected match ... any ideas how to fix? See the SO question here stackoverflow.com/questions/47203963/…