# tingle-search-bar

> 贴顶搜索框

Latest version **0.2.2** (published 2016-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install tingle-search-bar
pnpm add tingle-search-bar
yarn add tingle-search-bar
bun add tingle-search-bar
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2016-06-24 |
| First published | 2015-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | gbk |
| Maintainers | gbk, gnosaij, yize |
| Keywords | tingle-search-bar, SearchBar, 搜索框 |

## Links

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

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.1.2
- [tingle-icon](https://npm.io/package/tingle-icon.md) ~0.1.1
- [tingle-style](https://npm.io/package/tingle-style.md) ~0.2.1
- [tingle-context](https://npm.io/package/tingle-context.md) ~0.1.1

## 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.2.2 (latest) — 2016-06-24
- 0.2.1 — 2016-01-04
- 0.2.0 — 2015-09-11
- 0.0.1 — 2015-09-10

## README

# tingle-search-bar [![npm version](https://badge.fury.io/js/tingle-search-bar.svg)](http://badge.fury.io/js/tingle-search-bar)

The `SearchBar Component` for tinglejs

## TL;DR

SearchBar 是搜索查询用的输入框。

<img src="https://img.alicdn.com/tps/TB1p.j3JpXXXXXkXVXXXXXXXXXX-750-1254.png" width="375"/>

## Install

```bash
npm install tingle-search-bar --save
```

## Simple Usage

```js
constructor(props) {
    super(props);
    this.state = {
        value: '',
        keyCode: ''
    };
}
handleChange(value) {
    var t = this;
    t.setState({
        value: value
    });
}
handleKeyDown(keyCode, value) {
    var t = this;
    t.setState({
        keyCode: keyCode,
        value: value
    });
}
render() {
    var t = this;
    return (
        <div>
            <SearchBar placeholder="搜索" value={t.state.value} autoFocus={false} onChange={t.handleChange.bind(t)} onKeyDown={t.handleKeyDown.bind(t)}/>
            {t.state.value}
        </div>
    );
}
```

## Options 可用配置

| 配置项 | 必填 | 默认值 | 功能/备注 |
|---|----|---|----|
|className|optional|-|自定义样式类|
|placeholder|optional|搜索|输入框提示占位符|
|value|optional|-|输入框的输入字符|
|autoFocus|optional|false|是否自动获取焦点|
|onChange|optional|-|输入变化后触发的事件，需要在这里变更 value 的值|
|onKeyDown|optional|-|key down时触发事件，回传keyCode和value值|

## Links 相关链接

- [Fire a bug/Issues 提Bug](https://github.com/tinglejs/tingle-search-bar/issues)
- [Tingle项目](https://github.com/tinglejs/generator-tingle)

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