diff --git a/client/src/views/email/fields/email-address-varchar.js b/client/src/views/email/fields/email-address-varchar.js
index 73c37abdb9..7ad6c5ce3a 100644
--- a/client/src/views/email/fields/email-address-varchar.js
+++ b/client/src/views/email/fields/email-address-varchar.js
@@ -29,6 +29,7 @@
 import BaseFieldView from 'views/fields/base';
 import EmailFromAddressFieldView from 'views/email/fields/from-address-varchar';
 import EmailEmailAddressFieldView from 'views/email/fields/email-address';
+import Autocomplete from 'ui/autocomplete';
 
 class EmailAddressVarcharFieldView extends BaseFieldView {
 
@@ -332,64 +333,54 @@ class EmailAddressVarcharFieldView extends BaseFieldView {
                 this.addAddressHtml(item, this.nameHash[item] || '');
             });
 
-            this.$input.autocomplete({
-                serviceUrl: () => {
-                    return `EmailAddress/search` +
-                        `?maxSize=${this.getAutocompleteMaxCount()}` +
-                        `&onlyActual=true`;
-                },
-                paramName: 'q',
-                minChars: 1,
+            const autocomplete = new Autocomplete(this.$input.get(0), {
+                name: this.name,
                 autoSelectFirst: true,
-                noCache: true,
-                triggerSelectOnValidInput: false,
-                beforeRender: () => {
-                    // Prevent an issue that suggestions are shown and not hidden
-                    // when clicking outside the window and then focusing back on the document.
-                    if (this.$input.get(0) !== document.activeElement) {
-                        setTimeout(() => this.$input.autocomplete('hide'), 30);
-                    }
-                },
-                formatResult: (/** Record */suggestion) => {
-                    return this.getHelper().escapeString(suggestion.name) + ' <' +
-                        this.getHelper().escapeString(suggestion.id) + '>';
-                },
-                transformResult: (response) => {
-                    response = JSON.parse(response);
-                    const list = [];
-
-                    response.forEach((item) => {
-                        list.push({
-                            id: item.emailAddress,
-                            name: item.entityName,
-                            emailAddress: item.emailAddress,
-                            entityId: item.entityId,
-                            entityName: item.entityName,
-                            entityType: item.entityType,
-                            data: item.emailAddress,
-                            value: item.emailAddress,
-                        });
-                    });
-
-                    return {
-                        suggestions: list
-                    };
-                },
-                onSelect: (/** Record */item) => {
-                    this.addAddress(item.emailAddress, item.entityName, item.entityType, item.entityId);
+                triggerSelectOnValidInput: true,
+                focusOnSelect: true,
+                minChars: 1,
+                forceHide: true,
+                onSelect: item => {
+                    this.addAddress(
+                        item.emailAddress,
+                        item.entityName,
+                        item.entityType,
+                        item.entityId
+                    );
 
                     this.$input.val('');
-                    this.$input.focus();
+                },
+                formatResult: item => {
+                    return this.getHelper().escapeString(item.name) + ' <' +
+                        this.getHelper().escapeString(item.id) + '>';
+                },
+                lookupFunction: (query, done) => {
+                    Espo.Ajax
+                        .getRequest('EmailAddress/search', {
+                            q: query,
+                            maxSize: this.getAutocompleteMaxCount(),
+                            onlyActual: true,
+                        })
+                        .then(/** Record[] */response => {
+                            const result = response.map(item => {
+                                return {
+                                    id: item.emailAddress,
+                                    name: item.entityName,
+                                    emailAddress: item.emailAddress,
+                                    entityId: item.entityId,
+                                    entityName: item.entityName,
+                                    entityType: item.entityType,
+                                    data: item.emailAddress,
+                                    value: item.emailAddress,
+                                };
+                            });
+
+                            done(result);
+                        });
                 },
             });
 
-            this.once('render', () => {
-                this.$input.autocomplete('dispose');
-            });
-
-            this.once('remove', () => {
-                this.$input.autocomplete('dispose');
-            });
+            this.once('render remove', () => autocomplete.dispose());
         }
 
         if (this.mode === 'search' && this.getAcl().check('Email', 'create')) {
diff --git a/client/src/views/email/fields/email-address.js b/client/src/views/email/fields/email-address.js
index b6144539da..6028ea2404 100644
--- a/client/src/views/email/fields/email-address.js
+++ b/client/src/views/email/fields/email-address.js
@@ -27,6 +27,7 @@
  ************************************************************************/
 
 import BaseFieldView from 'views/fields/base';
+import Autocomplete from 'ui/autocomplete';
 
 class EmailEmailAddressFieldView extends BaseFieldView {
 
@@ -57,57 +58,53 @@ class EmailEmailAddressFieldView extends BaseFieldView {
     initSearchAutocomplete() {
         this.$input = this.$input || this.$el.find('input');
 
-        this.$input.autocomplete({
-            serviceUrl: () => {
-                return `EmailAddress/search` +
-                    `?maxSize=${this.getAutocompleteMaxCount()}`
-            },
-            paramName: 'q',
-            minChars: 1,
+        const autocomplete = new Autocomplete(this.$input.get(0), {
+            name: this.name,
             autoSelectFirst: true,
-            triggerSelectOnValidInput: false,
-            noCache: true,
-            formatResult: /** Record */suggestion => {
-                return this.getHelper().escapeString(suggestion.name) + ' <' +
-                    this.getHelper().escapeString(suggestion.id) + '>';
-            },
-            transformResult: response => {
-                response = JSON.parse(response);
-
-                let list = response.map(item => {
-                    return {
-                        id: item.emailAddress,
-                        name: item.entityName,
-                        emailAddress: item.emailAddress,
-                        entityId: item.entityId,
-                        entityName: item.entityName,
-                        entityType: item.entityType,
-                        data: item.emailAddress,
-                        value: item.emailAddress,
-                    }
-                });
-
-                if (this.skipCurrentInAutocomplete) {
-                    const current = this.$input.val();
-
-                    list = list.filter(item => item.emailAddress !== current)
-                }
-
-                return {suggestions: list};
-            },
-            onSelect: /** Record */item => {
+            triggerSelectOnValidInput: true,
+            focusOnSelect: true,
+            minChars: 1,
+            forceHide: true,
+            handleFocusMode: 2,
+            onSelect: item => {
                 this.$input.val(item.emailAddress);
-                this.$input.focus();
+            },
+            formatResult: item => {
+                return this.getHelper().escapeString(item.name) + ' <' +
+                    this.getHelper().escapeString(item.id) + '>';
+            },
+            lookupFunction: (query, done) => {
+                Espo.Ajax
+                    .getRequest('EmailAddress/search', {
+                        q: query,
+                        maxSize: this.getAutocompleteMaxCount(),
+                    })
+                    .then(/** Record[] */response => {
+                        let result = response.map(item => {
+                            return {
+                                id: item.emailAddress,
+                                name: item.entityName,
+                                emailAddress: item.emailAddress,
+                                entityId: item.entityId,
+                                entityName: item.entityName,
+                                entityType: item.entityType,
+                                data: item.emailAddress,
+                                value: item.emailAddress,
+                            };
+                        });
+
+                        if (this.skipCurrentInAutocomplete) {
+                            const current = this.$input.val();
+
+                            result = result.filter(item => item.emailAddress !== current)
+                        }
+
+                        done(result);
+                    });
             },
         });
 
-        this.once('render', () => {
-            this.$input.autocomplete('dispose');
-        });
-
-        this.once('remove', () => {
-            this.$input.autocomplete('dispose');
-        });
+        this.once('render remove', () => autocomplete.dispose());
     }
 
     fetchSearch() {
diff --git a/client/src/views/fields/email.js b/client/src/views/fields/email.js
index 52ee11be94..512edf0d0e 100644
--- a/client/src/views/fields/email.js
+++ b/client/src/views/fields/email.js
@@ -28,6 +28,7 @@
 
 import VarcharFieldView from 'views/fields/varchar';
 import MailtoHelper from 'helpers/misc/mailto';
+import Autocomplete from 'ui/autocomplete';
 
 class EmailFieldView extends VarcharFieldView {
 
@@ -355,43 +356,47 @@ class EmailFieldView extends VarcharFieldView {
         this.manageAddButton();
 
         if (this.mode === this.MODE_SEARCH && this.getAcl().check('Email', 'create')) {
-            this.$element.autocomplete({
-                serviceUrl: () => {
-                    return `EmailAddress/search` +
-                        `?maxSize=${this.getAutocompleteMaxCount()}`
-                },
-                paramName: 'q',
-                minChars: 1,
+            const autocomplete = new Autocomplete(this.$element.get(0), {
+                name: this.name,
                 autoSelectFirst: true,
-                triggerSelectOnValidInput: false,
-                formatResult: /** Record */suggestion => {
-                    return this.getHelper().escapeString(suggestion.name) + ' <' +
-                        this.getHelper().escapeString(suggestion.id) + '>';
-                },
-                transformResult: /** Record */response => {
-                    response = JSON.parse(response);
-                    const list = [];
-
-                    response.forEach(item => {
-                        list.push({
-                            id: item.emailAddress,
-                            name: item.entityName,
-                            emailAddress: item.emailAddress,
-                            entityId: item.entityId,
-                            entityName: item.entityName,
-                            entityType: item.entityType,
-                            data: item.emailAddress,
-                            value: item.emailAddress,
-                        });
-                    });
-
-                    return {suggestions: list};
-                },
-                onSelect: /** Record */item => {
+                triggerSelectOnValidInput: true,
+                focusOnSelect: true,
+                minChars: 1,
+                forceHide: true,
+                handleFocusMode: 2,
+                onSelect: item => {
                     this.$element.val(item.emailAddress);
-                    this.$element.focus();
+                },
+                formatResult: item => {
+                    return this.getHelper().escapeString(item.name) + ' <' +
+                        this.getHelper().escapeString(item.id) + '>';
+                },
+                lookupFunction: (query, done) => {
+                    Espo.Ajax
+                        .getRequest('EmailAddress/search', {
+                            q: query,
+                            maxSize: this.getAutocompleteMaxCount(),
+                        })
+                        .then(/** Record[] */response => {
+                            const result = response.map(item => {
+                                return {
+                                    id: item.emailAddress,
+                                    name: item.entityName,
+                                    emailAddress: item.emailAddress,
+                                    entityId: item.entityId,
+                                    entityName: item.entityName,
+                                    entityType: item.entityType,
+                                    data: item.emailAddress,
+                                    value: item.emailAddress,
+                                };
+                            });
+
+                            done(result);
+                        });
                 },
             });
+
+            this.once('render remove', () => autocomplete.dispose());
         }
     }