Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Select multiple data or single by using a modal. It has the options such as search and filter based on parent category

NotificationsYou must be signed in to change notification settings

Abilash-Abi/js-multilevel-searchable-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Multiple

https://github.com/Abilash-Abi/js-multilevel-searchable-modal/blob/2022e08549a31b381b4488b378512ba83adb7f92/demo/checkbox.pnghttps://github.com/Abilash-Abi/js-multilevel-searchable-modal/blob/2022e08549a31b381b4488b378512ba83adb7f92/demo/selected-checkbox.png

Single

https://github.com/Abilash-Abi/js-multilevel-searchable-modal/blob/2022e08549a31b381b4488b378512ba83adb7f92/demo/single-select.png

https://github.com/Abilash-Abi/js-multilevel-searchable-modal/blob/2022e08549a31b381b4488b378512ba83adb7f92/demo/singleselected.png

Installation

Download or clone this repo and run index.html

Usage

letdata=[{name:"Beauty & Toys",id:1,childs:[]}]$('#searchable').searchable(data,[]);#selected-selectedcheckboxids,eg[1,2]#options-SearchableCheckboxconfigurationproperties
<html><head><linkrel="stylesheet"href="./lib//searchable-checkbox.css"/></head><body><inputtype="text"id="searchable"class="input-field"/></body><scriptsrc="./lib/searchable-checkbox.js"></script><script>$('#searchable').searchable(data,[]);</script></html>

Advanced Setup

$('#searchable').searchable(data,[],{chip:false,renderFooter:(closeBtnId,doneBtnId)=>{return'<buttonpl-c1">+doneBtnId+'">Done</button>'},renderCheckbox:(item,selected,className,id)=>{letchecked=selected ?'checked' :'';return'<input id='+id+' type="checkbox" '+checked+' value="'+item.id+'"pl-c1">+className+'">'+item.name;},renderHeader:(searchInputId)=>{return'<h3>Categories<h3><input type="text"pl-c1">+searchInputId+'" placeholder="Search Category    "/>';}});

Options

NameTypeDefaultNote
chipbooltrueIf set false, then parent chip will not show
typestringcheckboxPass 'radio' for single select
renderFooter(closeBtnId,doneBtnId)FunctiondefaultEnable you to render custom footer for modal
renderCheckbox(item,selected,className)FunctiondefaultEnable you to render custom checkbox and logic
renderHeader(searchInputId)FunctiondefaultCustom header for modal with search input feature

About

Select multiple data or single by using a modal. It has the options such as search and filter based on parent category

Topics

Resources

Stars

Watchers

Forks


[8]ページ先頭

©2009-2025 Movatter.jp