# ion-search-input

> A simple ionic search component that renders an input to display the value as well as a search page.

Latest version **0.0.10** (published 2019-08-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install ion-search-input
pnpm add ion-search-input
yarn add ion-search-input
bun add ion-search-input
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2019-08-29 |
| First published | 2019-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 70.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | João Costa |
| Maintainers | llinq |
| Keywords | ionic3, search, input, screen, filter, ion-search-input, key-value |

## Links

- npm: https://www.npmjs.com/package/ion-search-input
- Repository: https://github.com/llinq/ion-search-input
- Homepage: https://ionicframework.com/docs/v3/
- Issues: https://github.com/llinq/ion-search-input/issues
- npm.io page: https://npm.io/package/ion-search-input

## 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

- 0.0.10 (latest) — 2019-08-29
- 0.0.9 — 2019-08-29
- 0.0.8 — 2019-08-29
- 0.0.7 — 2019-08-28
- 0.0.6 — 2019-08-28
- 0.0.5 — 2019-08-28
- 0.0.4 — 2019-08-28
- 0.0.3 — 2019-08-28
- 0.0.2 — 2019-08-28
- 0.0.1 — 2019-08-28

## README

# ion-search-input
A simple ionic search component that renders an input to display the value as well as a search page.

### How to use
`npm install ion-search-input --save`

###### Import in module
```javascript
import { IonSearchInputModule } from 'ion-search-input';

@NgModule({
	//...
  imports: [
	//...
    IonSearchInputModule
  ],
  //...
})
export class AppModule {}
```

###### View
    <ion-search-input [label]="'Teste'" [mock]="true" (selectedEvent)="test($event)"></ion-search-input>`

### Input Properties
| Attr | Type | Details |
| ------------ | ------------ | ------------ |
| label | `string` | Label that is displayed on the input as well as the navbar title (search screen). |
| mock  | `boolean`   | If true, will populate the input data with a mocked JSON that exists in the keyValue class. Default: `false`   |
| data | `keyValue[]` | JSON which will render the component options, the properties are id: number, value: string. More information in keyValue section. |
| model | `number` | Default value selected. |
| placeholder | `string`  | Input Placeholder. Default: `'Click to search'` |

### Output Events
| Attr | Details |
| ------------ | ------------ |
| selectedEvent | Event triggered when selecting a radio and clicking the save button. The `id` of the selected option is sent. |

### Screenshots
<img src="https://i.ibb.co/FBxXrW3/localhost-8100.png" width="150" />
<img src="https://i.ibb.co/L8GVrCy/localhost-8100-1.png" width="150" />
<img src="https://i.ibb.co/sg7C9fm/localhost-8100-2.png" width="150" />
<img src="https://i.ibb.co/MghwhGj/localhost-8100-3.png" width="150" />

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