user-selector

    0.1.9 • Public • Published

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

    Install

    npm i user-selector

    DownloadsWeekly Downloads

    12

    Version

    0.1.9

    License

    MIT

    Last publish

    Collaborators

    • meikidd