Add autocomplete feature to livechat user management

packages/rocketchat-livechat/client/views/app/livechatUsers.html

@@ -2,7 +2,7 @@
 	<h2>{{_ "Livechat_managers"}}</h2>
 	<form id="form-manager" class="inline">
 		<label>{{_ "Add_manager"}}</label>
-		<input type="text" name="username" placeholder="{{_ "Enter_a_username"}}">
+		{{> inputAutocomplete settings=managerAutocompleteSettings name="username" class="search" placeholder=(_ "Search_by_username") autocomplete="off"}}
 		<button name="add" class="button primary">{{_ "Add"}}</button>
 	</form>
 	<div class="list">
@@ -36,7 +36,7 @@
 	<h2>{{_ "Livechat_agents"}}</h2>
 	<form id="form-agent" class="inline">
 		<label>{{_ "Add_agent"}}</label>
-		<input type="text" name="username" placeholder="{{_ "Enter_a_username"}}">
+		{{> inputAutocomplete settings=agentAutocompleteSettings name="username" class="search" placeholder=(_ "Search_by_username") autocomplete="off"}}
 		<button name="add" class="button primary">{{_ "Add"}}</button>
 	</form>
 	<div class="list">

packages/rocketchat-livechat/client/views/app/livechatUsers.js

@@ -15,6 +15,50 @@ Template.livechatUsers.helpers({
 		if (this.emails && this.emails.length > 0) {
 			return this.emails[0].address;
 		}
+	},
+	agentAutocompleteSettings() {
+		return {
+			limit: 10,
+			// inputDelay: 300
+			rules: [{
+				// @TODO maybe change this 'collection' and/or template
+				collection: 'UserAndRoom',
+				subscription: 'userAutocomplete',
+				field: 'username',
+				template: Template.userSearch,
+				noMatchTemplate: Template.userSearchEmpty,
+				matchAll: true,
+				filter: {
+					exceptions: _.map(AgentUsers.find({}, { fields: { username: 1 } }).fetch(), user => { return user.username; })
+				},
+				selector(match) {
+					return { username: match };
+				},
+				sort: 'username'
+			}]
+		};
+	},
+	managerAutocompleteSettings() {
+		return {
+			limit: 10,
+			// inputDelay: 300
+			rules: [{
+				// @TODO maybe change this 'collection' and/or template
+				collection: 'UserAndRoom',
+				subscription: 'userAutocomplete',
+				field: 'username',
+				template: Template.userSearch,
+				noMatchTemplate: Template.userSearchEmpty,
+				matchAll: true,
+				filter: {
+					exceptions: _.map(ManagerUsers.find({}, { fields: { username: 1 } }).fetch(), user => { return user.username; })
+				},
+				selector(match) {
+					return { username: match };
+				},
+				sort: 'username'
+			}]
+		};
 	}
 });