@rudein/bs-searchable-multiselect NPM

bs-searchable-multiselect

How to start

Import bootstrap and jQuery
Run sms-generate-templates in directory that you want to store your templates file
Import sms_templates.js which was generated in last step
Import sms.js
Add class='sms-select' to your <select> tag.

Done!

You can also add sms-template-dark to classes of your select, if you prefer darker colors.

Using custom templates

If you want to further customize your select, there are a few simple steps that you have to perform:

Create your custom template. You can start with the one from sms_templates.html
- Remember to give it at least two classes: sms-searchable-multiselect and one that starts with sms-template, eg. sms-template-custom
Run sms-generate-templates with a path to your template as a first param. For example: sms-generate-templates /foo/bar/custom_sms_templates.html
Add your new custom template class to your select. It should look like this: <select class='sms-select sms-template-custom'>

And that's all. sms-generate-templates updated sms_templates.js file, adding your new template to it.

NOTE: If you want to add more than one template, just put them all in one file, one after another.

Constants

For now there is only one constant that you should be aware of - sms_max_rows. When this is set, there will be only that much visible rows. Rest of them will be wrapped with scrollable area.

Remember that this will work correctly only for templates that make use of bootstrap lists, or ones that have row height similar to them.