Searchdown

A searchable dropdown/select component with tagging and multi-select support.

Demo

Here's a demo

Installation

``bash
npm install searchdown
`

Usage

$3

`javascript
import 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']);
`

$3

`javascript
const {searchdown, getValue, setValue} = require('dist/searchdown');
`

$3

`html




`

Options

| 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) => { ... } |

$3

| Option | Description |
|---------------------|--------------------------|
| baseBackColor | Background color |
| selectedBackColor | Selected item background |
| hoverBackColor | Hover background |
| baseTextColor | Text color |
| selectedTextColor | Selected item text color |
| hoverTextColor | Hover text color |

API

$3

Initialize a searchdown instance.

$3

Get the selected value(s). Returns a string for single-select or array for multi-select.

$3

Set the selected value(s) programmatically.

$3

Validate the element and return validity status.

$3

Validate and show browser validation UI.

$3

Auto-initialize all elements with class="searchdown" and data-sd_* attributes.

$3

Enable automatic initialization on DOMContentLoaded.

$3

Set a custom message handler for all searchdown instances. By default, messages are shown using alert().

`javascript
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) where type is either "success" or "error". Pass null to reset to the default alert() behavior.

Auto-Creation via Data Attributes

`html


`

License

MIT

Development

1. Clone the repo
2. npm install
3. npm run dev
4. Open test/test.html` in your browser