SelectMadu is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.
To get started, checkout documentation and examples at https://pavishkrg.com/select-madu
- Searching select options.
- Multi-select interface with tags.
- Async data load as a function returing promise, for AJAX or for any async opertion.
- Dynamic changing of data.
- Multi-level nesting of options as groups.
Download or source the javascript file and css file from any of the following links
You can also download it directly from the releases listed in select-madu repository
<head>
<script type="text/javascript" src="selectmadu.min.js"></script>
<link rel="stylesheet" href="selectmadu.css">
</head>You can install SelectMadu from npm using the following command.
npm install select-madu --saveand then import it in your javascript file
import SelectMadu from 'select-madu';Note: CSS file has to be included separately
Optionally, if you are using Svelte you can import SelectMadu as a component.
import SelectMadu from 'select-madu';
<SelectMadu/>Note: CSS file has to be included separately
import SelectMadu from 'select-madu';
//To create
let instance = new SelectMadu({
//SelectMadu dom elements will be rendered within the specified parent element in target.
target: document.querySelector("#parentElement"),
//Properties for initializing SelectMadu. Refer Properties info below.
props: {
datasource: [
{ text: "Ferrai" },
{ text: "Lamborghini" },
{ text: "Aston Martin" }
]
}
});
//To destroy and remove
instance.$destroy();Check out Select madu home page for usage documentation and examples.
Check out SelectMadu home page for detailed documentation with properties information and API methods.
Pull requests are encouraged and always welcome. Help make SelectMadu better!
To work on SelectMadu
git clone https://github.com/pavish/select-madu.git
cd select-madu
npm installThe component is written in Svelte. It's an awesome library, you should check it out!
SCSS is used for styling. It is separate from the component and is within styles folder.
To build, run
npm run buildBuild generates the build folder, which contains the iife variant, with and without minimization It also generates the nodesrc folder which contains the es and umd variants for importing the component within your svelte app.
You can also contribute by writing additional tests, adding issues that you encounter, or by helping with the documentation.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent