@lx-react-materiel/mp-debounce-select v0.6.5

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

Events