# wox-admin-autocomplete

> basic react component

Latest version **1.0.5** (published 2018-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install wox-admin-autocomplete
pnpm add wox-admin-autocomplete
yarn add wox-admin-autocomplete
bun add wox-admin-autocomplete
```

## 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.0.5 |
| Published | 2018-05-08 |
| First published | 2018-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | frend.wong, wuliangren |
| Keywords | react, component |

## Links

- npm: https://www.npmjs.com/package/wox-admin-autocomplete
- npm.io page: https://npm.io/package/wox-admin-autocomplete

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2018-05-08
- 1.0.4 — 2018-05-07
- 1.0.3 — 2018-05-07
- 1.0.2 — 2018-05-07
- 1.0.1 — 2018-05-07
- 0.0.3 — 2018-05-07
- 0.0.2 — 2018-05-07
- 0.0.1 — 2018-05-07

## README

# Autocomplete [![image](https://img.shields.io/npm/v/wox-admin-autocomplete.svg)](https://www.npmjs.com/package/wox-admin-autocomplete)

> 模糊搜索

## API

| 属性 | 是否必填 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- | ---- |
| urlFn | 是 | 自定义请求URL `必填` | Function(value) |  |
| initData | 是 | 初始传入数据 | Array：[{key: xxx, label: xxx}] |  |
| placeholder | 否 | 占位文案 | String | '搜索' |
| keyName | 是 | 返回数据的key值，用户选择数据后 `{keyName: data}` 以这种形式返回选择的数据 `必填` | String | |
| disabled | 否 | 是否只读 | Boolean | false |
| singleType | 否 | 是否单选模式 | Boolean | false |
| callback | 是 | 用户选择数据后回调函数 | Function({keyName: value}) | |
| formatDataFn | 是 | 自定义组件渲染数据，数据格式为: [{key: xxx, label: xxx}] | Function(res.data, keyword) | |
| formatLabelFn | 否 | 自定义组件展示数据，数据格式为: [{key: xxx, label: xxx}] | Function(value) | |
| style | 否 | 自定义样式 | Object |  |

#### formatDataFn

自定义组件渲染数据

```javascript
formatDataFn: (values, keyword) => {
  const hotelsArr = values.map(value => ({
    key: value.id,
    label: `${value.id} - ${value.nameCN}`
  }));

  return [
    ...hotelsArr,
    { key: keyword, label: keyword },
    { key: '或同级', label: '或同级' }
  ];
}
```

#### formatLabelFn

自定义组件展示数据

```javascript
formatLabelFn: (values) => {
  return values.map(value => ({
    key: value.id,
    label: `自定义展示LABEL: ${value.id} - ${value.name}`
  }));
}

```

## Usage

```javascript
import WoxAutoComplete from 'wox-admin-autocomplete';

<WoxAutoComplete
  urlFn={(keyString) => `url?key=${keyString}`}
  initData={this.props.data.startLocationInfos}
  placeholder="搜索酒店"
  keyName='keyName'
  disabled={false}
  singleType={true}
  callback={this.props.callback}
  formatDataFn={(values, keyword) => {
    return values.map(value => ({
      key: value.id,
      label: value.name
    }));
  }}
  formatLabelFn={(values) => {
    return values.map(value => ({
      key: value.id,
      label: `【${value.id}】v.name`
    }));
  }}
  style={{width: '400px'}}
/>

```

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