README.md

SearchSelect 搜索选择器

搜索选择器

import { SearchSelect, Row ,Col } from 'uiw';
// or
import SearchSelect from '@uiw/react-search-select';

基础示例

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 [option, setOption] = React.useState(selectOption);
  const [loading, setLoading] = React.useState(false);
  const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]);
  const [value, setValue] = React.useState([{label: 'a7', value: 7}]);

  function handleSearch(e) {
    setLoading(true)
    setTimeout(() =>  {
     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
      setOption([...filterOpion]);
      setLoading(false);
    }, 500);
  }

  return(
    <Row gutter={20}>
     <Row>
       <SearchSelect
         mode="multiple"
         style={{ width: 200 }}
         showSearch={true}
         labelInValue={true}
         maxTagCount={6}
         allowClear
         value={values}
         disabled={false}
         placeholder="请输入选择"
         onSearch={handleSearch}
         // onSelect={(value)=>console.log('onSelect',value)}
         loading={loading}
         option={option}
         onChange={(value) => {
           console.log('value', value)
           setValues(value)
         }}
       />
     </Row>
     <Row>
       <SearchSelect
         mode="single"
         style={{ width: 200 }}
         showSearch={true}
         labelInValue={true}
         maxTagCount={6}
         allowClear
         value={value}
         disabled={false}
         placeholder="请输入选择"
         onSearch={handleSearch}
         // onSelect={(value)=>console.log('onSelect',value)}
         loading={loading}
         option={option}
         onChange={(value) => {
           console.log('value', value)
           setValue(value)
         }}
       />
     </Row>
    </Row>
  );
};
ReactDOM.render(<Demo />, _mount_);

在表单中使用

在 <Form /> 表单中应用 <SearchSelect /> 组件。

import ReactDOM from 'react-dom';
import { Form, Row, Col, SearchSelect, Button, Notify } 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 [option, setOption] = React.useState(selectOption);
  const [loading, setLoading] = React.useState(false);

  function handleSearch(e) {
    setLoading(true)
    setTimeout(() =>  {
     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))
      setOption([...filterOpion]);
      setLoading(false);
    }, 500);
  }

  return (
    <div>
      <Form
        onSubmitError={(error) => {
          if (error.filed) {
            return { ...error.filed };
          }
          return null;
        }}
        onSubmit={({initial, current}) => {
          const errorObj = {};
          if (!current.selectField) {
            errorObj.selectField = '默认需要选择内容，选择入内容';
          }
          if(Object.keys(errorObj).length > 0) {
            const err = new Error();
            err.filed = errorObj;
            Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });
            throw err;
          }
          Notify.success({
            title: '提交成功！',
            description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,
          });
        }}
        fields={{
          selectField: {
            initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],
            children: (
              <SearchSelect
                allowClear
                labelInValue={true}
                showSearch={true}
                mode="multiple"
                disabled={false}
                placeholder="请输入选择"
                onSearch={handleSearch}
                onChange={(v)=>{
                  console.log('onChange',v)
                }}
                option={option}
                loading={loading}
              />
            )
          },
          selectSingle: {
            initialValue:[{label: 'a7', value: 7}],
            children: (
              <SearchSelect
                mode="single"
                labelInValue={true}
                showSearch={true}
                allowClear
                disabled={false}
                placeholder="请输入选择"
                onSearch={handleSearch}
                onChange={(v)=>{
                  console.log('onChange',v)
                }}
                option={option}
                loading={loading}
              />
            )
          },
        }}
      >
        {({ fields, state, canSubmit }) => {
          return (
            <div style={{ marginLeft:10}}>
              <Row >
                <Col fixed style={{width:200}}>{fields.selectField}</Col>
              </Row>
              <Row>
                <Col fixed style={{width:200}}>{fields.selectSingle}</Col>
              </Row>
              <Row>
                <Col fixed>
                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
                </Col>
              </Row>
              <Row>
                <Col>
                  <pre style={{ padding: 10, marginTop: 10 }}>
                    {JSON.stringify(state.current, null, 2)}
                  </pre>
                </Col>
              </Row>
            </div>
          )
        }}
      </Form>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

Props

参数	说明	类型	默认值	版本
allowClear	支持清除	Boolean	false	-
disabled	禁用选择器	Boolean	false	-
mode	选择模式: multiple single	String	single	-
defaultValue	指定默认选中的条目	String/Number	-	-
value	指定当前选中的条目，多选时为一个数组	String | Number | String[] | Number[] | LabeledValue | LabeledValue[]	-	-
placeholder	选择框默认文字	String	-	-
maxTagCount	多选模式下展示tag的个数,默认所有	number	-	-
labelInValue	开启会把 Select 的 value 类型从 string/number 变为 { value: string/number, label: string }	Boolean	false	-
showSearch	是否可搜索	Boolean	-	-
size	选择框尺寸	Enum{large, default, small }	default	-
tagProps	将参数传递给 <Tag> 组件	TagProps	{}	4.13.0
onChange	选中 option，或 input 的 value，调用此函数	function(value:String | Number | String[] | Number[] | LabeledValue | LabeledValue[])	-	-
onSearch	文本框值变化时回调	function(value: String)	-	-
onSelect	被选中时调用，参数为选中项的 value	function(value: String/Number )	-	-
loading	加载中状态	Boolean	false	-