# deku-search

> a simple Search Autocomplete component

Latest version **2.0.0** (published 2016-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install deku-search
pnpm add deku-search
yarn add deku-search
bun add deku-search
```

## 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 | 2.0.0 |
| Published | 2016-11-14 |
| First published | 2015-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Steven Iseki |
| Maintainers | steveniseki |
| Keywords | javascript, deku, dekujs, deku-component, autocomplete, search autocomplete, auto complete, search, deku-search, deku search, search control, searchbox, search-box |

## Links

- npm: https://www.npmjs.com/package/deku-search
- Repository: https://github.com/StevenIseki/deku-search
- Homepage: https://github.com/StevenIseki/deku-search#readme
- Issues: https://github.com/StevenIseki/deku-search/issues
- npm.io page: https://npm.io/package/deku-search

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2016-11-14
- 1.0.4 — 2015-12-31
- 1.0.3 — 2015-11-09

## README

# deku-search

[![npm version](https://badge.fury.io/js/deku-search.svg)](https://badge.fury.io/js/deku-search)

![](https://raw.githubusercontent.com/StevenIseki/deku-search/master/example/screenshot.gif)

deku-search is a simple Autocomplete Search component

## Install

`npm install deku-search --save`

## Usage basic

Pass in your `items` as a prop to deku-search. The items must be an array of objects with `value` and `id`, and any other props you may need, which will not be displayed. Check out the [example](https://github.com/StevenIseki/deku-search/blob/master/example) for more info.

```jsx
/** @jsx element */
import Search from 'deku-search'
import { element, createApp } from 'deku'

function HiItems(items) {
  console.log(items)
}

let items = [
  { id: 0, value: 'ruby' },
  { id: 1, value: 'javascript' },
  { id: 2, value: 'lua' },
  { id: 3, value: 'go' },
  { id: 4, value: 'julia' }
]

function update () {
  render(<Search items={items}
                 placeholder='Pick your language'
                 NotFoundPlaceholder='No items found...'
                 maxSelected={3}
                 multiple={true}
                 onItemsChanged={ (items) => HiItems(items) } />, {})
}

var render = createApp(document.body, update)
update()

```

## Props

#### `items` (required)
List of Items to filter through, an array of items with `value` and `id`, and any other props. value is displayed. ` let items = [{ id: 0, value: 'ruby' }, { id: 1, value: 'lua' }`

#### `multiple` (optional)
Defaults to false, set as true if you want multiple items in the list, false for a single selection dropdown.

#### `maxSelected` (optional)
Defaults to 100, a maximum number of items allowed to be selected

#### `placeholder` (optional)
placeholder for the input

#### `NotFoundPlaceholder` (optional)
The placeholder shown when no results are found

#### `onItemsChanged` (optional)
Handler returns the items from the Search autocomplete component when items are added or removed from the list.

#### `onKeyChange` (optional)
Handler returns the search value on key change.


## Styles

deku-search can be used with your own custom styles. A minimal [deku-search.css](https://github.com/StevenIseki/deku-search/blob/master/lib/deku-search.css) style sheet is included.

## Development

    npm install
    npm run build
    npm test
    npm start

## License

[MIT](http://isekivacenz.mit-license.org/)

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