diff --git a/src/modals/add-contact.js b/src/modals/add-contact.js
index 675e9ec95c..bfccd1b36e 100644
--- a/src/modals/add-contact.js
+++ b/src/modals/add-contact.js
@@ -23,11 +23,6 @@ const AddContactModal = BootstrapModal.extend({
     },
 
     afterRender () {
-        if (typeof api.settings.get('xhr_user_search_url') === 'string') {
-            this.initXHRAutoComplete();
-        } else {
-            this.initJIDAutoComplete();
-        }
         const jid_input = this.el.querySelector('input[name="jid"]');
         this.el.addEventListener('shown.bs.modal', () => jid_input.focus(), false);
     },
diff --git a/src/modals/templates/add-contact.js b/src/modals/templates/add-contact.js
index 69a614880f..48d4180527 100644
--- a/src/modals/templates/add-contact.js
+++ b/src/modals/templates/add-contact.js
@@ -2,6 +2,7 @@ import { __ } from 'i18n';
 import { api } from '@converse/headless/core.js';
 import { html } from "lit";
 import { modal_header_close_button } from "plugins/modal/templates/buttons.js"
+import { getServerList } from "../../plugins/rosterview/utils"
 
 
 export default (el) => {
@@ -26,9 +27,7 @@ export default (el) => {
                             <label class="clearfix" for="jid">${i18n_xmpp_address}:</label>
                             <div class="suggestion-box suggestion-box__jid">
                                 <ul class="suggestion-box__results suggestion-box__results--below" hidden=""></ul>
-                                <input type="text" name="jid" ?required=${(!api.settings.get('xhr_user_search_url'))}
-                                    value="${el.model.get('jid') || ''}"
-                                    class="form-control suggestion-box__input"
+                                <converse-autocomplete name="jid" .getAutoCompleteList="${getServerList}"
                                     placeholder="${i18n_contact_placeholder}"/>
                                 <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
                             </div>
@@ -46,7 +45,7 @@ export default (el) => {
 
                         <div class="form-group add-xmpp-contact__group">
                             <label class="clearfix" for="name">${i18n_group}:</label>
-                            <converse-autocomplete .getAutoCompleteList="${() => el.getGroupsAutoCompleteList()}" name="group"/>
+                            <!--<converse-autocomplete .getAutoCompleteList="${() => el.getGroupsAutoCompleteList()}" name="group"/>-->
                         </div>
 
                         <div class="form-group"><div class="invalid-feedback">${i18n_error_message}</div></div>
diff --git a/src/plugins/rosterview/utils.js b/src/plugins/rosterview/utils.js
index faefe6c665..9cffb70a86 100644
--- a/src/plugins/rosterview/utils.js
+++ b/src/plugins/rosterview/utils.js
@@ -1,4 +1,4 @@
-import { _converse, api } from "@converse/headless/core";
+import { _converse, api, converse } from "@converse/headless/core";
 
 
 export function highlightRosterItem (chatbox) {
@@ -98,3 +98,29 @@ export function populateContactsMap (contacts_map, contact) {
     }
     return contacts_map;
 }
+
+let final_list = [];
+let timestamp = null;
+
+async function getServerList() {
+    const responseA = await fetch('https://data.xmpp.net/providers/v1/providers-A.json');
+    const dataA = await responseA.json();
+    const popular_mucsA = dataA.items.map(item => item.jid);
+    const responseB = await fetch('https://data.xmpp.net/providers/v1/providers-B.json');
+    const dataB = await responseB.json();
+    const popular_mucsB = dataB.items.map(item => item.jid);
+    const responseC = await fetch('https://data.xmpp.net/providers/v1/providers-C.json');
+    const dataC = await responseC.json();
+    const popular_mucsC = dataC.items.map(item => item.jid);
+    const response = [...popular_mucsA, ...popular_mucsB, ...popular_mucsC];
+    console.log(response)
+    final_list = [...new Set(response)];
+}
+
+export async function getXMPPList() {
+    if (!timestamp || converse.env.dayjs().isAfter(timestamp, 'day')) {
+        await getServerList();
+        timestamp = (new Date()).toISOString();
+    }
+    return final_list;
+}
diff --git a/src/shared/autocomplete/component.js b/src/shared/autocomplete/component.js
index 30feac046e..726b0b05b4 100644
--- a/src/shared/autocomplete/component.js
+++ b/src/shared/autocomplete/component.js
@@ -9,6 +9,7 @@ export default class AutoCompleteComponent extends CustomElement {
         return {
             'getAutoCompleteList': { type: Function },
             'auto_evaluate': { type: Boolean },
+            'dataMap': { type: Function },
             'auto_first': { type: Boolean }, // Should the first element be automatically selected?
             'filter': { type: String },
             'include_triggers': { type: String },
@@ -24,6 +25,7 @@ export default class AutoCompleteComponent extends CustomElement {
         this.auto_evaluate = true; // Should evaluation happen automatically without any particular key as trigger?
         this.auto_first = false; // Should the first element be automatically selected?
         this.filter = 'contains';
+        this.dataMap = a => a; // Function that maps user provided input to a suggestion value
         this.include_triggers = ''; // Space separated chars which should be included in the returned value
         this.match_current_word = false; // Match only the current word, otherwise all input is matched
         this.max_items = 10;
@@ -62,6 +64,7 @@ export default class AutoCompleteComponent extends CustomElement {
             'filter': this.filter == 'contains' ? FILTER_CONTAINS : FILTER_STARTSWITH,
             'include_triggers': [],
             'list': () => this.getAutoCompleteList(),
+            'data': (a) => this.dataMap(a),
             'match_current_word': true,
             'max_items': this.max_items,
             'min_chars': this.min_chars