dropDown.js
install
npm install dropdown-selectbox
use
var Dropdown = require('dropdown-selectbox');
if not using browerify/webpack simply copy dropdown.js
and dropdown.css
.
See the examples in example
folder.
create a dropdown
mainText: 'Select Item' field: list: name: 'Item1' id: 1 name: 'Item2' id: 2 { var id = $itemdata'id'; console; };
id
are optional. If passed will be added as data-id
to each list-item.
html generated
Item1 Item1 Item2
Css
Copy the css from dropdown.css file .
Classes
- is-active - applied to
dropdown
, if dropdown is open. - is-disabled - applied to
dropdown
, if the list provided is an empty array. - item-selected - applied to
dropdown__item
, if item is selected. - scrolled - applied to
dropdown__item
, if item s currently being navigated using keys.
load from a url
mainText: 'Select Item' field: url: '/list' { // use this function to specify data to be used // good for updating main text with selected item return list: dataitems selected: dataitems0; } { console; } ;
Use it as SelectBox [Options]
- type : 'selectBox', it works as select box.Supports key navigation and search.
- scrollOn: 200, no of pixels to start scrolling for key down nav.
For custom selected and item html
selTpl: {tpl: '<span class="name"> selected item </span>', _class: 'name'},
itmTpl: {tpl: '<span class="name"> item </span>', _class: 'name'},
The selTpl will be inserted inside <div class="dropdown__selected"></div>
The itmTpl will be inserted inside <div class="dropdown__item"></div>
Add items dynamically
var dropdown = mainText: 'Select Item' field: ; dropdown;
Update selected item text
dropdown;
pass true
if the item is present in the list
Add items at the top
dropdown;
Add custom elements
dropdown.addCustom('<div class="datepicker">My datepicker</div>');
Options:
- noDataText: 'Not available', applies
is-disabled
class if list is empty. - selected: {name: 'Item1', 'id': 1}, replaces the mainText if id is found in the list.
- nameAttr: 'display_name', use this if you have other than name in your json.
- idAttr: '_id', use this if you have other than id in your json.
Api
- dropdown.open() -- opens the dropdown/selectBox
- dropdown.close() -- closes the dropdown/selectBox
- dropdown.closeAll() -- closes all the dropdowns/ selectBox
- dropdown.disabled() -- adds disabled class to the dropdowns
- dropdown.removeItems() -- emptys the list