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

jintoppy picture jintoppy · May 25, 2015 · Viewed 16.5k times · Source

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.

Google auto suggest

Answer

nahualli picture nahualli · Aug 15, 2015

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.