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

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)