Search 搜索

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

页面、表单数据搜索时使用

API

搜索

参数说明类型默认值
prefix样式前缀String'next-'
size大小，可选 primary/secondary 可选择 medium/large; normal 可选择 small/mediumString'medium'
filter前置下拉框,default为默认选中项 [{text:'Products', value:'Products',default: true},{text:'Suppliers',valuse:'Suppliers'}]Array[]
hasIcon搜索按钮图标Booleantrue
searchText搜索按钮文案String'Search'
combox定制下拉框,适合业务特殊定制ReactNodefalse
inputWidth搜索框宽度String/Number'auto'
overlayVisible与combox配合使用,控制定制下拉框的展现Boolean-
dataSource下拉提示框:历史搜索/搜索建议 [{label:'',value:'',disabled:true}]Array[]
type类型可选值:'primary', 'secondary', 'normal'Enum'primary'
value数值String/Number-
defaultValue搜索框默认值 (不适用于Combox)String-
className样式名称String-
placeholder默认提示String-
onInputFocusinput获取焦点的时候触发的回调签名:Function() => voidFunctionfunction() { }
onInputBlurinput失去焦点的时候触发的回调签名:Function() => voidFunctionfunction() { }
onSearch点击搜索按钮触发的回调签名:Function(object: Object) => void参数:object: {Object} {filter:'',key:''}Functionfunction() { }
onChange输入关键字时的回掉签名:Function() => voidFunctionfunction() { }
onFilterChangeFilter改变时的回掉（filterValue）签名:Function() => voidFunctionfunction() { }
autoWidth搜索框100%自适应父容器Booleanfalse
filterAutoWidthfilter的下拉菜单是否与选择器对齐Booleantrue
style自定义样式Object-
container指定渲染combox的容器ReactNode-

代码示例

自适应宽度

自适应宽度

Search 搜索 - 图1

查看源码在线预览

  1. import { Search } from "@icedesign/base";
  3. class App extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       filter: [
  8.         {
  9.           text: "Products",
  10.           value: "Products"
  11.         },
  12.         {
  13.           text: "Products1",
  14.           value: "Products1"
  15.         },
  16.         {
  17.           text: "Products2",
  18.           value: "Products2"
  19.         },
  20.         {
  21.           text: "Products3",
  22.           value: "Products3"
  23.         },
  24.         {
  25.           text: "Products4",
  26.           value: "Products4"
  27.         },
  28.         {
  29.           text: "Products5",
  30.           value: "Products5"
  31.         },
  32.         {
  33.           text: "Products6",
  34.           value: "Products6"
  35.         },
  36.         {
  37.           text: "Products7",
  38.           value: "Products7"
  39.         },
  40.         {
  41.           text: "Products8",
  42.           value: "Products8"
  43.         },
  44.         {
  45.           text: "Products9",
  46.           value: "Products9"
  47.         },
  48.         {
  49.           text: "Products10",
  50.           value: "Products10"
  51.         },
  52.         {
  53.           text: "Suppliers",
  54.           value: "Suppliers",
  55.           default: true
  56.         }
  57.       ],
  58.       value: "",
  59.       dataSource: []
  60.     };
  61.   }
  63.   onSearch(value) {
  64.     console.log(value);
  65.   }
  67.   onChange(value) {
  68.     console.log("input is:", value);
  70.     this.setState({
  71.       value: value
  72.     });
  73.   }
  75.   onFilterChange(value) {
  76.     console.log("filter is:", value);
  77.   }
  79.   render() {
  80.     return (
  81.       <div style={{ width: 700 }}>
  82.         <Search
  83.           onSearch={this.onSearch.bind(this)}
  84.           onChange={this.onChange.bind(this)}
  85.           dataSource={this.state.dataSource}
  86.           autoWidth
  87.         />
  88.       </div>
  89.     );
  90.   }
  91. }
  93. ReactDOM.render(<App />, mountNode);

自定义下拉框内容

自定义下拉框内容。

Search 搜索 - 图2

查看源码在线预览

  1. import { Search, Menu } from "@icedesign/base";
  3. class App extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       overlayVisible: false,
  8.       value: "111222",
  9.       menuData: [
  10.         {
  11.           text: "Option 1",
  12.           value: "Option 1 Value",
  13.           index: "1"
  14.         },
  15.         {
  16.           text: "Option 2",
  17.           value: "Option 2 Value",
  18.           index: "2"
  19.         },
  20.         {
  21.           text: "Option 3",
  22.           value: "Option 3 Value",
  23.           index: "3"
  24.         },
  25.         {
  26.           text: "Option 4",
  27.           value: "Option 4 Value",
  28.           index: "4"
  29.         }
  30.       ],
  31.       filter: [
  32.         {
  33.           text: "Products",
  34.           value: "Products"
  35.         },
  36.         {
  37.           text: "Products1",
  38.           value: "Products1"
  39.         },
  40.         {
  41.           text: "Products2",
  42.           value: "Products2"
  43.         },
  44.         {
  45.           text: "Products3",
  46.           value: "Products3"
  47.         },
  48.         {
  49.           text: "Products4",
  50.           value: "Products4"
  51.         },
  52.         {
  53.           text: "Products5",
  54.           value: "Products5"
  55.         },
  56.         {
  57.           text: "Products6",
  58.           value: "Products6"
  59.         },
  60.         {
  61.           text: "Products7",
  62.           value: "Products7"
  63.         },
  64.         {
  65.           text: "Products8",
  66.           value: "Products8"
  67.         },
  68.         {
  69.           text: "Products9",
  70.           value: "Products9"
  71.         },
  72.         {
  73.           text: "Products10",
  74.           value: "Products10"
  75.         },
  76.         {
  77.           text: "Suppliers",
  78.           value: "Suppliers",
  79.           default: true
  80.         }
  81.       ]
  82.     };
  83.   }
  85.   renderMenu() {
  86.     const menuData = this.state.menuData;
  88.     return (
  89.       <Menu onClick={this.onClick.bind(this)} className="diy-menu">
  90.         <Menu.Group label="Recent" key="xxx">
  91.           {menuData.map(item => {
  92.             return (
  93.               <Menu.Item key={item.value}>
  94.                 {" "}
  95.                 {item.text}{" "}
  96.                 <a
  97.                   onClick={this.onDelete.bind(this)}
  98.                   target="_self"
  99.                   data-index={item.index}
  100.                 >
  101.                   Delete
  102.                 </a>{" "}
  103.               </Menu.Item>
  104.             );
  105.           })}
  106.         </Menu.Group>
  107.       </Menu>
  108.     );
  109.   }
  111.   onSearch(value) {
  112.     console.log(value);
  113.   }
  115.   onChange(value) {
  116.     this.setState({
  117.       overlayVisible: value.length > 0,
  118.       value: value
  119.     });
  120.   }
  122.   onClick(selectedKeys) {
  123.     if (typeof selectedKeys === "string") {
  124.       this.setState({
  125.         overlayVisible: false,
  126.         value: selectedKeys
  127.       });
  128.     }
  129.   }
  131.   onDelete(e) {
  132.     e.stopPropagation();
  134.     const index = e.currentTarget.getAttribute("data-index");
  136.     const menuData = this.state.menuData;
  138.     const menuDataNew = [];
  140.     menuData.forEach(function(item) {
  141.       if (item.index !== index) {
  142.         menuDataNew.push(item);
  143.       }
  144.     });
  146.     this.setState({
  147.       menuData: menuDataNew
  148.     });
  149.   }
  151.   onInputFocus() {
  152.     this.setState({
  153.       overlayVisible: true
  154.     });
  155.   }
  157.   render() {
  158.     const overlayVisible = this.state.overlayVisible;
  159.     const value = this.state.value;
  161.     return (
  162.       <div style={{ width: 700 }}>
  163.         <Search
  164.           placeholder="123"
  165.           autoWidth
  166.           combox={<div>{this.renderMenu()}</div>}
  167.           overlayVisible={overlayVisible}
  168.           value={value}
  169.           onSearch={this.onSearch.bind(this)}
  170.           onChange={this.onChange.bind(this)}
  171.           onInputFocus={this.onInputFocus.bind(this)}
  172.         />
  173.       </div>
  174.     );
  175.   }
  176. }
  178. ReactDOM.render(<App />, mountNode);
  2. .diy-menu{
  3.     /*width: 275px*/;
  4. }
  6. .diy-menu .next-menu-item a{
  7.     display:none;
  8.     float: right;
  9.     cursor: pointer;
  10. }
  11. .diy-menu .next-menu-item:hover a{
  12.     display:inline-block;
  13. }

普通search的事件以及受控方式

onSearch, onChange, onInputBlur, onInputFocus事件。

Search 搜索 - 图3

查看源码在线预览

  1. import { Search, Button } from "@icedesign/base";
  3. class App extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       dataSource: [
  8.         {
  9.           label: "Recent",
  10.           value: "Recent",
  11.           disabled: true
  12.         },
  13.         {
  14.           label: "连衣裙",
  15.           value: "连衣裙",
  16.           disabled: false
  17.         },
  18.         {
  19.           label: "墨镜",
  20.           value: "墨镜",
  21.           disabled: false
  22.         },
  23.         {
  24.           label: "短袖",
  25.           value: "短袖",
  26.           disabled: false
  27.         }
  28.       ],
  29.       value: ""
  30.     };
  31.   }
  32.   onSearchClick() {
  33.     let time = new Date();
  35.     time = time.getTime();
  37.     this.setState({
  38.       value: time
  39.     });
  40.   }
  42.   onClearClick() {
  43.     this.setState({
  44.       value: ""
  45.     });
  46.   }
  47.   // 点击search按钮和在选中项上回车时触发
  48.   // 参数为obj：
  49.   // {
  50.   //    filter: [],
  51.   //    key: xx
  52.   // }
  53.   onSearch(obj) {
  54.     console.log(obj);
  55.   }
  56.   // input 输入时触发
  57.   onChange(value) {
  58.     this.setState({
  59.       value
  60.     });
  61.   }
  63.   onInputBlur(e, obj) {
  64.     console.log(e, obj);
  65.   }
  67.   onInputFocus(e, clickByUser, state) {
  68.     console.log(e, clickByUser, state);
  69.   }
  71.   render() {
  72.     return (
  73.       <div>
  74.         <div>
  75.           <Button onClick={this.onSearchClick.bind(this)}>
  76.             改变搜索关键字
  77.           </Button>
  78.           <Button onClick={this.onClearClick.bind(this)}>清除关键字</Button>
  79.         </div>
  80.         <br />
  82.         <Search
  83.           inputWidth={300}
  84.           value={this.state.value}
  85.           onSearch={this.onSearch.bind(this)}
  86.           onChange={this.onChange.bind(this)}
  87.           onInputBlur={this.onInputBlur.bind(this)}
  88.           onInputFocus={this.onInputFocus.bind(this)}
  89.           dataSource={this.state.dataSource}
  90.           placeholder="What are you looking for..."
  91.           name="textName"
  92.         />
  93.         <br />
  94.       </div>
  95.     );
  96.   }
  97. }
  99. ReactDOM.render(<App />, mountNode);

下拉框

带下拉框的用法。可以设置onFilterChange事件

Search 搜索 - 图4

查看源码在线预览

  1. import { Search, Button } from "@icedesign/base";
  3. class App extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       filter: [
  8.         {
  9.           text: "Products",
  10.           value: "Products"
  11.         },
  12.         {
  13.           text: "Products1",
  14.           value: "Products1"
  15.         },
  16.         {
  17.           text: "Products2",
  18.           value: "Products2"
  19.         },
  20.         {
  21.           text: "Products3",
  22.           value: "Products3"
  23.         },
  24.         {
  25.           text: "Products4",
  26.           value: "Products4"
  27.         },
  28.         {
  29.           text: "Products5",
  30.           value: "Products5"
  31.         },
  32.         {
  33.           text: "Products6",
  34.           value: "Products6"
  35.         },
  36.         {
  37.           text: "Products7",
  38.           value: "Products7"
  39.         },
  40.         {
  41.           text: "Products8",
  42.           value: "Products8"
  43.         },
  44.         {
  45.           text: "Products9",
  46.           value: "Products9"
  47.         },
  48.         {
  49.           text: "Products10",
  50.           value: "Products10"
  51.         },
  52.         {
  53.           text: "Suppliers",
  54.           value: "Suppliers",
  55.           default: true
  56.         }
  57.       ],
  58.       value: ""
  59.     };
  60.   }
  62.   onSearch(value) {
  63.     console.log(value);
  64.   }
  66.   onChange(value) {
  67.     console.log(`input is: ${value}`);
  69.     this.setState({
  70.       value: value
  71.     });
  72.   }
  74.   // value为filter的值，obj为search的全量值
  75.   onFilterChange(value, obj) {
  76.     console.log(`filter is: ${value}`);
  77.     console.log("fullData: ", obj);
  78.   }
  80.   onButtonClick() {
  81.     this.setState({
  82.       filter: [
  83.         {
  84.           text: "111111111111111111",
  85.           value: "111111111111111111"
  86.         },
  87.         {
  88.           text: "2222222",
  89.           value: "22222222",
  90.           default: true
  91.         }
  92.       ]
  93.     });
  94.   }
  96.   render() {
  97.     return (
  98.       <div>
  99.         <div>
  100.           <Button onClick={this.onButtonClick.bind(this)}>修改filter</Button>
  101.         </div>
  102.         <br />
  104.         <Search
  105.           onChange={this.onChange.bind(this)}
  106.           onSearch={this.onSearch.bind(this)}
  107.           filter={this.state.filter}
  108.           onFilterChange={this.onFilterChange.bind(this)}
  109.         />
  110.         <br />
  111.         <br />
  112.         <Search
  113.           size="large"
  114.           onChange={this.onChange.bind(this)}
  115.           onSearch={this.onSearch.bind(this)}
  116.           filter={this.state.filter}
  117.           onFilterChange={this.onFilterChange.bind(this)}
  118.         />
  119.         <br />
  120.       </div>
  121.     );
  122.   }
  123. }
  125. ReactDOM.render(<App />, mountNode);

size

【注意】type为primary和secondary的时候size只能为'medium'和'large'，type为normal是size只能为'medium'和'small'.type 切换，展示出不同的样式风格。size进行大小设置 .

Search 搜索 - 图5

查看源码在线预览

  1. import { Search } from "@icedesign/base";
  3. class App extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       size: "medium",
  8.       normalSize: "small"
  9.     };
  10.   }
  11.   onButtonClick() {
  12.     this.setState({
  13.       size: this.state.size === "medium" ? "large" : "medium",
  14.       normalSize: this.state.normalSize === "medium" ? "small" : "medium"
  15.     });
  16.   }
  17.   render() {
  18.     return (
  19.       <div>
  20.         <h2>Primary</h2>
  21.         <Search
  22.           size="large"
  23.           inputWidth={300}
  24.           defaultValue="large"
  25.           placeholder="What are you looking for..."
  26.         />
  27.         <br />
  28.         <Search
  29.           size="medium"
  30.           inputWidth={300}
  31.           defaultValue="medium"
  32.           placeholder="What are you looking for..."
  33.         />
  35.         <h2>Secondary</h2>
  36.         <Search
  37.           size="large"
  38.           inputWidth={300}
  39.           defaultValue="large"
  40.           type="secondary"
  41.           placeholder="What are you looking for..."
  42.         />
  43.         <br />
  44.         <Search
  45.           inputWidth={300}
  46.           size="medium"
  47.           defaultValue="medium"
  48.           type="secondary"
  49.           placeholder="What are you looking for..."
  50.         />
  52.         <h2>normal</h2>
  53.         <Search
  54.           size="medium"
  55.           type="normal"
  56.           inputWidth={300}
  57.           defaultValue="medium"
  58.           placeholder="What are you looking for..."
  59.         />
  60.         <br />
  61.         <Search
  62.           size="small"
  63.           type="normal"
  64.           inputWidth={300}
  65.           defaultValue="small"
  66.           placeholder="What are you looking for..."
  67.         />
  68.       </div>
  69.     );
  70.   }
  71. }
  73. ReactDOM.render(<App />, mountNode);

type

简单用法

Search 搜索 - 图6

查看源码在线预览

  1. import { Search } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div>
  5.     <Search type="primary" inputWidth={300} placeholder="primary" />
  7.     <br />
  8.     <Search type="secondary" inputWidth={300} placeholder="Secondary" />
  10.     <br />
  11.     <Search type="normal" inputWidth={300} placeholder="normal" />
  12.   </div>,
  13.   mountNode
  14. );

相关区块

Search 搜索 - 图7

暂无相关区块