RVRNEXT-30 initialize TomSelect in community_members.js

public/static/js/communities/community_members.js

@@ -1,17 +1,31 @@
 (function () {
     const element = document.getElementById('newMember').elements['user_id'];
-    const choices = new Choices(element, {
+    const select = new TomSelect(element, {
-        noResultsText: 'No users found',
+        placeholder: 'User',
-        noChoicesText: 'Start typing to search users'
+        valueField: 'value',
+        labelField: 'label',
+        searchField: 'label',
+        loadThrottle: 300,
+        load: function (query, callback) {
+            var self = this;
+            RVR.httpRequest('GET', searchUserUrl.replace('QUERY', encodeURIComponent(query)), function () {
+                self.clearOptions();
+                callback(this.response.results);
+            });
+        },
     });
 
-    element.addEventListener('search', RVR.debounce(async function (e) {
+    select.on('change', function (value) {
-        RVR.httpRequest('GET', searchUserUrl.replace('QUERY', encodeURIComponent(e.detail.value)), function () {
+        this.clearOptions();
-            choices.setChoices(this.response.results, 'value', 'label', true);
     });
-    }));
 
-    element.addEventListener('choice', function () {
+    select.on('blur', function (value) {
-        choices.setChoices([], 'value', 'label', true);
+        this.clearOptions();
+    });
+
+    select.on('type', function (value) {
+        if (value === '') {
+            this.clearOptions();
+        }
     });
 })();