mp-debounce-select

搜索查找

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

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

代码示例

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