diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
index f2b382c511..1f98080d56 100644
--- a/packages/react-search-select/README.md
+++ b/packages/react-search-select/README.md
@@ -57,7 +57,6 @@ function handleSearch(e) {
maxTagCount={6}
allowClear
value={values}
- disabled={false}
placeholder="请输入选择"
onSearch={handleSearch}
// onSelect={(value)=>console.log('onSelect',value)}
@@ -78,7 +77,6 @@ function handleSearch(e) {
maxTagCount={6}
allowClear
value={value}
- disabled={false}
placeholder="请输入选择"
onSearch={handleSearch}
// onSelect={(value)=>console.log('onSelect',value)}
@@ -90,6 +88,14 @@ function handleSearch(e) {
}}
/>
+
+
+
);
};
@@ -115,11 +121,10 @@ const Demo = () => {
{ label: 'a8', value: 8 },
]
+ const valueAmount = 2
const [option, setOption] = React.useState(selectOption);
const [loading, setLoading] = React.useState(false);
- const [values, setValues] = React.useState([{label: 'a7', value: 7}]);
- const [disabled, setDisabled] = React.useState(false);
- const maxTagCount = 2
+ const [values, setValues] = React.useState([ 1, 2, 7]);
function handleSearch(e) {
setLoading(true)
@@ -131,7 +136,70 @@ const Demo = () => {
}
return(
-
+
+ console.log('onSelect',value)}
+ loading={loading}
+ option={option}
+ onChange={(value) => {
+ setValues(value)
+ }}
+ />
+
+ );
+};
+ReactDOM.render(, _mount_);
+```
+
+## 显示最大数量
+
+
+```jsx
+import ReactDOM from 'react-dom';
+import { SearchSelect,Row,Col } from 'uiw';
+
+const Demo = () => {
+ const selectOption=[
+ { label: 'a1', value: 1 },
+ { label: 'a2', value: 2 },
+ { label: 'a3', value: 3 },
+ { label: 'a4', value: 4 },
+ { label: 'a5', value: 5 },
+ { label: 'a6', value: 6 },
+ { label: 'a7', value: 7 },
+ { label: 'a8', value: 8 },
+ ]
+
+ const maxTagCount = 4
+ const [option, setOption] = React.useState(selectOption);
+ const [loading, setLoading] = React.useState(false);
+ const [values, setValues] = React.useState([
+ { label: 'a1', value: 1 },
+ { label: 'a2', value: 2 },
+ { label: 'a5', value: 5 },
+ { label: 'a7', value: 7 },
+ { label: 'a8', value: 8 },
+ ]);
+
+ function handleSearch(e) {
+ setLoading(true)
+ setTimeout(() => {
+ const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
+ setOption([...filterOpion]);
+ setLoading(false);
+ }, 500);
+ }
+
+ return(
+
{
maxTagCount={maxTagCount}
allowClear
value={values}
- disabled={disabled}
placeholder="请输入选择"
onSearch={handleSearch}
- // onSelect={(value)=>console.log('onSelect',value)}
loading={loading}
option={option}
onChange={(value) => {
- if(value?.length >= maxTagCount)
- setDisabled(true)
setValues(value)
}}
/>
@@ -158,6 +222,47 @@ const Demo = () => {
ReactDOM.render(, _mount_);
```
+## 不可搜索
+
+
+```jsx
+import ReactDOM from 'react-dom';
+import { SearchSelect,Row,Col } from 'uiw';
+
+const Demo = () => {
+ const selectOption=[
+ { label: 'a1', value: 1 },
+ { label: 'a2', value: 2 },
+ { label: 'a3', value: 3 },
+ { label: 'a4', value: 4 },
+ { label: 'a5', value: 5 },
+ { label: 'a6', value: 6 },
+ { label: 'a7', value: 7 },
+ { label: 'a8', value: 8 },
+ ]
+
+ const [values, setValues] = React.useState([1,7]);
+
+ return(
+
+ {
+ setValues(value)
+ }}
+ />
+
+ );
+};
+ReactDOM.render(, _mount_);
+```
### 在表单中使用
@@ -307,3 +412,4 @@ ReactDOM.render(, _mount_);
| onSearch | 文本框值变化时回调 | function(value: String) | - | - |
| onSelect | 被选中时调用,参数为选中项的 value | function(value: String/Number ) | - | - |
| loading | 加载中状态 | Boolean | `false` | - |
+| valueAmount | 多选模式下,限制最多选择多少个(value的长度) | number | - | - |
diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
index e167f22b3f..c03d05b3a5 100644
--- a/packages/react-search-select/src/index.tsx
+++ b/packages/react-search-select/src/index.tsx
@@ -15,6 +15,7 @@ export interface SearchSelectProps extends IProps, DropdownProps {
mode?: 'single' | 'multiple';
size?: 'large' | 'default' | 'small';
maxTagCount?: number;
+ valueAmount?: number;
labelInValue?: boolean;
loading?: boolean;
showSearch?: boolean;
@@ -38,9 +39,10 @@ export default function SearchSelect(props: SearchSelectProps) {
const {
allowClear = false,
disabled = false,
+ valueAmount,
size = 'default',
- maxTagCount,
option = [],
+ maxTagCount,
loading = false,
labelInValue = false,
prefixCls = 'w-search-select',
@@ -125,7 +127,7 @@ export default function SearchSelect(props: SearchSelectProps) {
}
if (!isMultiple && opts.length > 0) setSelectedLabel(opts[0].label || '');
- setSelectedValue(opts);
+ setSelectedValue(opts.slice(0, valueAmount));
}
function removeSelectItem(index: number) {
@@ -149,7 +151,10 @@ export default function SearchSelect(props: SearchSelectProps) {
}
function handleItemsClick(index: number, item?: SearchSelectOptionData) {
- let values: SearchSelectOptionData[] = index !== -1 ? removeSelectItem(index) : [...selectedValue, item!];
+ let values: SearchSelectOptionData[] =
+ index !== -1
+ ? removeSelectItem(index)
+ : [...selectedValue.slice(0, valueAmount ? valueAmount - 1 : undefined), item!];
const resultValue = values.map((item) => item.value);
handleChange(resultValue, values);
}