diff --git a/public/static/js/communities/community_members.js b/public/static/js/communities/community_members.js index 35506a9..fe9e478 100644 --- a/public/static/js/communities/community_members.js +++ b/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, { - noResultsText: 'No users found', - noChoicesText: 'Start typing to search users' + const select = new TomSelect(element, { + placeholder: 'User', + 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) { - RVR.httpRequest('GET', searchUserUrl.replace('QUERY', encodeURIComponent(e.detail.value)), function () { - choices.setChoices(this.response.results, 'value', 'label', true); - }); - })); + select.on('change', function (value) { + this.clearOptions(); + }); - element.addEventListener('choice', function () { - choices.setChoices([], 'value', 'label', true); + select.on('blur', function (value) { + this.clearOptions(); + }); + + select.on('type', function (value) { + if (value === '') { + this.clearOptions(); + } }); })();