# fancy-dropdown

> ![npm](https://img.shields.io/npm/dw/fancy-dropdown) ![npm](https://img.shields.io/npm/v/fancy-dropdown) ![GitHub](https://img.shields.io/github/license/basilmeer/fancy-dropdown)

Latest version **1.2.1** (published 2021-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install fancy-dropdown
pnpm add fancy-dropdown
yarn add fancy-dropdown
bun add fancy-dropdown
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2021-12-29 |
| First published | 2021-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 56.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Basil Meer |
| Maintainers | basilmeer |
| Keywords | jquery, dropdowns, styleable, select |

## Links

- npm: https://www.npmjs.com/package/fancy-dropdown
- npm.io page: https://npm.io/package/fancy-dropdown

## Dependencies (1)

- [jquery](https://npm.io/package/jquery.md) ^3.6.0

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2021-12-29
- 1.2.0 — 2021-12-29
- 1.1.4 — 2021-12-29
- 1.1.3 — 2021-12-28
- 1.1.2 — 2021-12-28
- 1.1.1 — 2021-12-28
- 1.1.0 — 2021-12-28
- 1.0.2 — 2021-12-28
- 1.0.1 — 2021-12-28
- 1.0.0 — 2021-12-27
- 0.0.1 — 2021-12-27

## README

# FancyDropdown
![npm](https://img.shields.io/npm/dw/fancy-dropdown)
![npm](https://img.shields.io/npm/v/fancy-dropdown)
![GitHub](https://img.shields.io/github/license/basilmeer/fancy-dropdown)

A small jQuery-based library that allows you to create a relatively more style-able dropdown.

[Demo](https://basilmeer.github.io/fancy-dropdown) |
[GitHub](https://github.com/basilmeer/fancy-dropdown) |
[NPM](https://www.npmjs.com/package/fancy-dropdown)

# Usage

Import the CSS and JS alongwith jQuery.

```html
<!-- The import methods may vary but in case of vanilla HTML, for example: -->
<link rel="stylesheet" href="node_modules/fancy-dropdown/css/index.css">
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="node_modules/fancy-dropdown/js/index.js"></script>
```

Add the class `fancy-dropdown` and the options passed to a readonly input field like so:

```html
<input type='text' class='fancy-dropdown' data-fd-options="['foo', 'bar']" readonly />
```

and it gets transformed into a slightly fancier looking dropdown that looks something like:

```html
<div class="fancy-dropdown-wrapper">
  <input type='hidden' name='fd_0' /> <!-- Contains the actual value -->
  <input type='text' class='fancy-dropdown' readonly /> <!-- Contains the visible value -->
  <div class="fancy-dropdown-options"> <!-- Contains the options -->
    <ul class="options-list">
      <li class="option-item" data-value="0">foo</li>
      <li class="option-item" data-value="1">bar</li>
    </ul>
  </div>
</div>
```

# Dropdown Options

The options can be passed through the `data-fd-options` that can either be an array or a JSON object like so:

```html
<input type='text' class='fancy-dropdown' data-fd-options="{'top': 'teemo', 'mid': 'gangplank'}" name="favorite-champions" readonly />
```

Which converts the input field to:

```html
<div class="fancy-dropdown-options">
  <ul class="options-list">
    <li class="option-item" data-value="teemo">top</li>
    <li class="option-item" data-value="gangplank">mid</li>
  </ul>
</div>
```

# Name Attribute

By default, FD sets a unique name attribute for the hidden input field that can be processed through a form but you can also set one explicitly by giving the input text field a name:

```html
<input type='text' class='fancy-dropdown' data-fd-options="['arcane', 'cowboy bebop']" name="favorite-shows" readonly />
```

Which sets the hidden input field's name attribute:

```html
<input type='hidden' name='favorite-shows' />
```

# Known Issues
None for now
# License
MIT

---
_Source: https://npm.io/package/fancy-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._