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