select-select v1.0.0
smart-select
smart-select is a lightweight jQuery plugin that transforms a select element into a flexible dropdown list with filtering options and keyboard support. Enjoy! :grinning:
Requirements
jQuery >= 3.0
Install
npm install jquery-smart-select
git clone https://github.com/bgdeutsch/smart-select.gitUsage
Include style and script tags - be sure to include jQuery before smart-select!
<script src="/path/to/jquery-3.4.1.js"></script>
<script src="/path/to/smart-select.js"></script>
<link type="text/css" rel="stylesheet" href="/path/to/smart-select.css">Instantiate
$("#mySelectElement").SmartSelect(options)How It Works
Smart Select transforms a select list into an unordered list with nested list items. Clicking anywhere inside of the input field opens the menu, and once open clicking anywhere outside closes it. As you type in the input field, Smart Select will filter the menu items to match the input string. If no matches are found, the menu becomes hidden. Smart Select generates a span with the class name of "ss-selected-value". You can use this to easily grab the current selected value and do what you need with it.
Options
| Option | Description |
|---|---|
| allowNewItem | Boolean Determines whether the user is allowed to enter a string in the input field that does not match any current dropdown list item. This can be useful to provide users the option to save a new list item, for example. If false, smart select will prevent further user input if the current input string does not match any current dropdown list items. |
| filterOnMenuOpen | Boolean Determines whether the dropdown menu should be automatically filtered before a user clicks to open it. If false, smart select will show the entire unfiltered list of dropdown items upon the menu being opened. |
| fixedWidth | Number The input/dropdown menu will adhere to a fixed width (in pixels) if provided. By default, smart select will occupy the width of it's content + 20 pixels. Providing a fixed width can be useful if you expect unusually long strings in the dropdown list. |
| minCharsToFilter | Number If provided, smart select will not attempt to filter the list of items until the input string reaches the minCharsToFilter value. Because smart select filters the list with each keystroke, there are performance concerns with large lists. Using a sensible minimum character limit can help offset these concerns. |
Keyboard
Smart Select has keyboard support built in:
- Up & Down arrow keys navigate through list
- Escape & Tab keys will close the menu if it's open
- Enter key selects the currently selected menu item
Markup
An example of the markup generated by Smart Select:
<div class="smart-select-container" style="width: 125px;">
<input class="smart-select-input" type="text" autocomplete="off">
<ul class="smart-select-menu" style="width: 125px; display: block;">
<li value="Taco">Taco</li>
<li value="Ice Cream">Ice Cream</li>
<li value="Pizza">Pizza</li>
<li value="Cookie" style="selected">Cookie</li>
</ul>
<span class="ss-selected-value hidden" value="Cookie">Cookie</span>
</div>Help
Email me, or open a new GitHub Issue with some code example that can be reproduced. Thanks!
4 years ago