user selector

this is a webcomponent for selecting users. demo

Install

npm install user-selector

Integrating with your Application

<link rel="import" href="./user-selector.html">

<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>

Get selected users

var userSelector = document.querySelector('user-selector');
console.log(userSelector.value); // [{"id":1,"name":"Qingguang Mei","lastName":"Mei"}]

Set selected users

var userSelector = document.querySelector('user-selector');
userSelector.setSelected([{id:12,name:'qingguang',nickname:'meikidd'}]);

Set data users

You can use setUsers(data) to set user data.

var userSelector = document.querySelector('user-selector');
userSelector.setUsers([{id:12,name:'qingguang',nickname:'meikidd'}]);

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.querySelector('user-selector');
userSelector.setFormatSelected('{name} ({nickname}) - {id}');

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.querySelector('user-selector');
userSelector.setFormatList('{name} ({nickname}) - {id}');

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 set data-url attribute, user-selector will launch Ajax request http://example.com/users/search?keyword={keyword} to the server to get the JSON data.

<user-selector data-url="//example.com/users/search">
  <input type="text" placeholder="input username here" />
</user-selector>

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);
});