Download or clone this repo and run index.html
let data = [
{
name:"Beauty & Toys",
id:1,
childs:[]
}
]
$('#searchable').searchable(data,[]);
#selected - selected checkbox ids, eg [1,2]
#options - SearchableCheckbox configuration properties<html>
<head>
<link rel="stylesheet" href="./lib//searchable-checkbox.css" />
</head>
<body>
<input type="text" id="searchable" class="input-field" />
</body>
<script src="./lib/searchable-checkbox.js"></script>
<script>
$('#searchable').searchable(data,[]);
</script>
</html> $('#searchable').searchable(data,[],{
chip:false,
renderFooter:(closeBtnId,doneBtnId)=>{return '<button id="'+doneBtnId+'">Done</button>'},
renderCheckbox:(item,selected,className,id)=>{
let checked = selected ? 'checked' : '';
return '<input id='+id+' type="checkbox" '+checked+' value="'+item.id+'" class="'+className+'">'+item.name;
},
renderHeader:(searchInputId)=>{
return '<h3>Categories<h3><input type="text" id="'+searchInputId+'" placeholder="Search Category "/>';
}
});| Name | Type | Default | Note |
|---|---|---|---|
| chip | bool | true | If set false, then parent chip will not show |
| type | string | checkbox | Pass 'radio' for single select |
| renderFooter(closeBtnId,doneBtnId) | Function | default | Enable you to render custom footer for modal |
| renderCheckbox(item,selected,className) | Function | default | Enable you to render custom checkbox and logic |
| renderHeader(searchInputId) | Function | default | Custom header for modal with search input feature |