0.1.9 • Published 9 years ago

user-selector v0.1.9

Weekly downloads
3
License
MIT
Repository
github
Last release
9 years ago

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

9 years ago

0.1.8

9 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.1

10 years ago