# @lx-react-materiel/mp-debounce-select

> Taro 小程序 debounce-select

Latest version **0.6.5** (published 2023-05-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install @lx-react-materiel/mp-debounce-select
pnpm add @lx-react-materiel/mp-debounce-select
yarn add @lx-react-materiel/mp-debounce-select
bun add @lx-react-materiel/mp-debounce-select
```

## 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.6.5 |
| Published | 2023-05-18 |
| First published | 2021-04-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | pok.huang |
| Maintainers | haiyulu, mind29, simba.wang, owen.huang, tiny.tu, gweid, azumia, pok.h, jeely, tomgou, yuki.liu |
| Keywords | taro, taro3, debounce-select, lx |

## Links

- npm: https://www.npmjs.com/package/@lx-react-materiel/mp-debounce-select
- Repository: git@gitlab.lixinio.com:frontend/lx-react-materiel
- npm.io page: https://npm.io/package/@lx-react-materiel/mp-debounce-select

## Dependencies (1)

- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 0.6.5 (latest) — 2023-05-18
- 0.6.3-beta.0 (beta) — 2023-05-15
- 0.6.4 — 2023-05-18
- 0.6.3 — 2023-05-15
- 0.6.1 — 2023-05-08
- 0.6.0 — 2023-05-08
- 0.5.0 — 2023-05-08
- 0.2.4 — 2022-10-13
- 0.2.3 — 2022-03-01
- 0.2.2 — 2022-02-28
- 0.2.1 — 2022-02-28
- 0.2.0 — 2021-07-14
- 0.1.0 — 2021-04-14
- 0.0.1-beta.2 — 2021-04-08
- 0.0.1-beta.1 — 2021-04-07
- … 1 more at https://npm.io/package/@lx-react-materiel/mp-debounce-select/versions

## README

# `mp-debounce-select`

##  [搜索查找](https://www.npmjs.com/package/@lx-react-materiel/mp-debounce-select)

> 从服务器搜索数据，输入关键字进行查找

该组件只能在 ** Taro3 ** 中使用

### 代码示例

```tsx
import MpDebounceSelect from '@lx-react-materiel/mp-debounce-select';

type Item = {
  plate_number: string;
  name: string;
}

const Demo = () => {
  const [searchList, setSearchList] = useState<Item[]>([]);
  const [searchTips, setSearchTips] = useState<string>('');

  const handleSearch = async (val: string) => {
    setSearchList([]);
    setSearchTips('');
    if (val === '') {
      setSearchTips('支持输入部分车牌信息模糊查询');
      return;
    }
    const { code, data } = await fetchData({
      plate_number: val,
    });
    if (code === 0) {
      if (data.length === 0) {
        setSearchTips('暂无数据');
      }
      setSearchList(data);
    }
  };

  const handleSelectSearch = (res: Item) => {
    console.log('select item', res);
  };

  return (
    <MpDebounceSelect
      placeholder="输入车牌查询"
      searchTips={searchTips}
      firstKey="plate_number"
      secondKey="name"
      threeKey="created_at"
      onSearch={handleSearch}
      suggestionsResult={searchList}
      onSelect={handleSelectSearch}
    />
  )
}

```

### API

#### Props
| 参数                | 说明                                                           | 类型      | 默认值     | 必填 |
|---------------------|----------------------------------------------------------------|----------|------------|------|
| placeholder         | 输入框占位文本                                                  | string   | 请搜索     | 否   |
| suggestionsResult   | 可选择的搜索结果                                                | object[] | []         | 否   |
| searchTips          | 搜索结果展示区无结果时提示文本                                   | string   | ''         | 否   |
| firstKey            | 搜索结果展示项展示字段                                          | string    | --         | 是   |
| secondKey           | 搜索结果展示项展示字段 （如需要展示更多字段时，右侧展示第二字段）  | string    | ''         | 否   |
| wrapperBgColor      | 组件输入框外部背景色                                            | string    | '#fff'     | 否   |
| inputBgColor        | 组件输入框背景色                                                | string    | '#f8fafc'  | 否   |
| showSearchText        | 是否显示搜索按钮                                                | boolean    | false  | 否   |
| closeOnClickModal        | 点击modal是否关闭                                                | boolean    | true  | 否   |
| closeOnclearModal        | 点击clear按钮是否关闭弹窗                                                | boolean    | false  | 否   |

#### Events
| 事件        | 说明                                            | 回调参数         |
|-------------|-------------------------------------------------|-----------------|
| onSearch    | 输入框聚焦或停止输入（debounce 500ms）时触发      | (val: string)   |
| onSelect    | 在可选项中点击选择时触发                          | (item: object)  |
| onCloseMask    | 弹窗关闭时触发                         | (val: str)  |
| onClickSearchBtn    | 点击搜索按钮触发                         | (val: str)  |
| onClear    | 点击清空按钮触发                         | (void)  |

---
_Source: https://npm.io/package/@lx-react-materiel/mp-debounce-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._