diff --git a/public/app/core/components/user_picker.ts b/public/app/core/components/user_picker.ts
new file mode 100644
index 00000000000..2dad2ebcdba
--- /dev/null
+++ b/public/app/core/components/user_picker.ts
@@ -0,0 +1,76 @@
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+import _ from 'lodash';
+
+const template = `
+<div class="dropdown">
+  <metric-segment segment="ctrl.userSegment"
+    get-options="ctrl.debouncedSearchUsers($query)"
+    on-change="ctrl.onChange()"></metric-segment>
+  </div>
+`;
+export class UserPickerCtrl {
+  userSegment: any;
+  userLogin: string;
+  userId: number;
+  debouncedSearchUsers: any;
+
+  /** @ngInject */
+  constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
+    this.userSegment = this.uiSegmentSrv.newSegment({value: 'Choose User', selectMode: true});
+    this.debouncedSearchUsers = _.debounce(this.searchUsers, 500, {'leading': true, 'trailing': false});
+  }
+
+  searchUsers(query: string) {
+    return Promise.resolve(this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + query).then(result => {
+      return _.map(result.users, this.userKey.bind(this));
+    }));
+  }
+
+  onChange() {
+    this.userLogin = this.userSegment.value.split(' - ')[0];
+    console.log(this.userLogin);
+
+    this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + this.userLogin)
+      .then(result => {
+        if (!result) {
+          return;
+        }
+
+        result.users.forEach(u => {
+          if (u.login === this.userLogin) {
+            this.userId = u.id;
+          }
+        });
+    });
+  }
+
+  private userKey(user: User) {
+    return this.uiSegmentSrv.newSegment(user.login + ' - ' + user.email);
+  }
+
+
+}
+
+export interface User {
+  id: number;
+  name: string;
+  login: string;
+  email: string;
+}
+
+export function userPicker() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: UserPickerCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      userLogin: '=',
+      userId: '=',
+    }
+  };
+}
+
+coreModule.directive('userPicker', userPicker);
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 4ecb4318bf7..d159f6b7ecc 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -46,7 +46,7 @@ import {contextSrv} from './services/context_srv';
 import {KeybindingSrv} from './services/keybindingSrv';
 import {helpModal} from './components/help/help';
 import {NavModelSrv, NavModel} from './nav_model_srv';
-
+import {userPicker} from './components/user_picker';
 
 export {
   arrayJoin,
@@ -72,4 +72,5 @@ export {
   helpModal,
   NavModelSrv,
   NavModel,
+  userPicker,
 };
diff --git a/public/app/features/org/partials/edit_user_group.html b/public/app/features/org/partials/edit_user_group.html
index 085d349f6a7..18e8d3fe001 100644
--- a/public/app/features/org/partials/edit_user_group.html
+++ b/public/app/features/org/partials/edit_user_group.html
@@ -21,8 +21,8 @@
   <form name="addMemberForm" class="gf-form-group">
 		<div class="gf-form">
 			<span class="gf-form-label width-10">Name</span>
-			<input type="text" bs-typeahead="ctrl.searchUsers" required ng-model="ctrl.userName" class="gf-form-input max-width-14" >
-		</div>
+      <user-picker required user-login="ctrl.userName" user-id="ctrl.userId"></user-picker>
+    </div>
 
 		<div class="gf-form-button-row">
 			<button type="submit" class="btn btn-success" ng-click="ctrl.addMember()">Add</button>
diff --git a/public/app/features/org/user_group_details_ctrl.ts b/public/app/features/org/user_group_details_ctrl.ts
index e7fde98ee70..af2fdcd99d2 100644
--- a/public/app/features/org/user_group_details_ctrl.ts
+++ b/public/app/features/org/user_group_details_ctrl.ts
@@ -7,29 +7,12 @@ export default class UserGroupDetailsCtrl {
   userGroup: UserGroup;
   userGroupMembers: User[] = [];
   userName = '';
-  usersSearchCache: User[] = [];
-  searchUsers: any;
+  userId: number;
   navModel: any;
 
   constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) {
     this.navModel = navModelSrv.getOrgNav(3);
     this.get();
-    this.usersSearchCache = [];
-    this.searchUsers = (queryStr, callback) => {
-      if (this.usersSearchCache.length > 0) {
-        callback(_.map(this.usersSearchCache, this.userKey));
-        return;
-      }
-
-      this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + queryStr).then(result => {
-        this.usersSearchCache = result.users;
-        callback(_.map(result.users, this.userKey));
-      });
-    };
-  }
-
-  private userKey(user: User) {
-    return user.login + ' - ' + user.email;
   }
 
   get() {
@@ -71,9 +54,7 @@ export default class UserGroupDetailsCtrl {
   addMember() {
     if (!this.$scope.addMemberForm.$valid) { return; }
 
-    const login = this.userName.split(' - ')[0];
-    const memberToAdd = _.find(this.usersSearchCache, ['login', login]);
-    this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: memberToAdd.id}).then(() => {
+    this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: this.userId}).then(() => {
       this.userName = '';
       this.get();
     });