A searchable dropdown/select component with tagging and multi-select support.
npm install searchdownimport searchdown, {getValue, setValue, validate} from 'dist/searchdown';
import 'searchdown/styles'; // Import CSS
// Initialize on an element
searchdown('#my-dropdown', {
values: ['Apple', 'Banana', 'Cherry', 'Date'],
placeholder: 'Select a fruit...',
multiple: true
});
// Get selected values
const selected = getValue('#my-dropdown');
// Set values programmatically
setValue('#my-dropdown', ['Apple', 'Cherry']);const {searchdown, getValue, setValue} = require('dist/searchdown');<script src="https://unpkg.com/searchdown/dist/searchdown.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/searchdown/dist/searchdown.css">
<script>
Searchdown.searchdown('#my-dropdown', { values: ['A', 'B', 'C'] });
</script>| Option | Type | Default | Description |
|---|---|---|---|
values |
string[] or object |
[] |
Available options to select from |
sort |
'ASC' | 'DESC' |
undefined |
Sort order for dropdown options |
limit |
number |
0 |
Max options to show (0 = unlimited) |
enteredLimit |
number |
0 |
Max selections allowed (0 = unlimited) |
multiple |
boolean |
false |
Allow multiple selections |
addValues |
boolean |
false |
Allow adding custom values |
saveEntered |
boolean |
false |
Save custom values to options list |
hideEntered |
boolean |
false |
Hide already-selected options |
allowDuplicates |
boolean |
false |
Allow duplicate selections |
caseSensitive |
boolean |
false |
Case-sensitive search |
placeholder |
string |
'Search' |
Input placeholder text |
required |
number | boolean |
0 |
Minimum required selections |
maxHeight |
number |
600 |
Max dropdown height in pixels |
inputName |
string |
auto | Form input name attribute |
initialValues |
string[] |
[] |
Pre-selected values |
simpleInput |
boolean |
false |
Single input mode (no tags) |
textarea |
boolean |
false |
Use textarea instead of input |
onChange |
function |
null |
Provide a function which is called whenever the selected options are changed. Takes two arguments: (element, value) => { ... } |
| Option | Description |
|---|---|
baseBackColor |
Background color |
selectedBackColor |
Selected item background |
hoverBackColor |
Hover background |
baseTextColor |
Text color |
selectedTextColor |
Selected item text color |
hoverTextColor |
Hover text color |
Initialize a searchdown instance.
Get the selected value(s). Returns a string for single-select or array for multi-select.
Set the selected value(s) programmatically.
Validate the element and return validity status.
Validate and show browser validation UI.
Auto-initialize all elements with class="searchdown" and data-sd_* attributes.
Enable automatic initialization on DOMContentLoaded.
Set a custom message handler for all searchdown instances. By default, messages are shown using alert().
import { setMessageHandler } from 'dist/searchdown';
// Use with Toastify
setMessageHandler((text, type) => {
Toastify({
text,
type, // "success" or "error"
duration: 5000,
gravity: "top",
position: "center"
}).showToast();
});
// Use with a custom notification system
setMessageHandler((text, type) => {
myNotificationSystem.show(text, { type: type });
});
// Reset to default (alert)
setMessageHandler(null);Parameters:
handler- A function that receives(text, type)wheretypeis either"success"or"error". Passnullto reset to the defaultalert()behavior.
<div class="searchdown"
data-sd_values='["Option 1", "Option 2", "Option 3"]'
data-sd_multiple="true"
data-sd_placeholder="Choose options...">
</div>
<script type="module">
import {enableAutoCreate} from 'dist/searchdown';
enableAutoCreate();
</script>MIT
- Clone the repo
npm installnpm run dev- Open
test/test.htmlin your browser