user selector
this is a webcomponent for selecting users. demo
Install
npm install user-selector
Integrating with your Application
Get selected users
var userSelector = document;console; // [{"id":1,"name":"Qingguang Mei","lastName":"Mei"}]
Set selected users
var userSelector = document;userSelector;
Set data users
You can use setUsers(data)
to set user data.
var userSelector = document;userSelector;
or attribute data-users
<user-selector data-users='[{"id":"1","name":"Qingguang Mei","lastName":"Mei"},{"id":"3","name":"Ying Cheng","lastName":"Cheng"},{"id":"4","name":"Qianhe Mei","lastName":"Mei"}]'>
<input type="text" placeholder="input username here" />
</user-selector>
Set selected users template
Customize search list item format by setFormatSelected
var userSelector = document;userSelector;
or attribute data-format-selected
<user-selector data-format-selected='{name} ({nickname}) - {id}'>
<input type="text" placeholder="input username here" />
</user-selector>
Set auto suggestion list template
Customize search list item format by setFormatList
var userSelector = document;userSelector;
or attribute data-format-list
<user-selector data-format-list='{name} ({nickname}) - {id}'>
<input type="text" placeholder="input username here" />
</user-selector>
Load remote data
- use
data-url
attribute. When you setdata-url
attribute, user-selector will launch Ajax requesthttp://example.com/users/search?keyword={keyword}
to the server to get the JSON data.
Events
select
triggered when a user been selected
var userSelector = document.querySelector('user-selector');
userSelector.addEventListener('select', function(e) {
console.log(e.data.user);
});
remove
triggered when a user been removed
var userSelector = document.querySelector('user-selector');
userSelector.addEventListener('remove', function(e) {
console.log(e.data.user);
});