SearchBar 搜索栏

定义／Definition

规则 / Rule

• 输入前搜索必须要有默认的搜索建议，如“请输入关键字”，”双十一口红特卖”

• 输入时提供搜索自动补全

• 输入时提供清除按钮、取消按钮

• 输入时提供历史记录

• 输入后提供回取消、上一步功能

• 业务场景需要时，搜索建议可凸显为匹配的部分，与其他部分做区分

代码演示

基本

import { SearchBar } from 'antd-mobile';
import { createForm } from 'rc-form';
let SearchBarExample = React.createClass({
  getInitialState() {
    return {
      value: '蚂蚁中台',
    };
  },
  render() {
    const { getFieldProps } = this.props.form;
    console.log(this.props.form.getFieldsValue());
    return (
      <div>
        <SearchBar
          value="美食"
          placeholder="搜索"
          onSubmit={(value) => { console.log(`onSubmit${value}`); }}
          onClear={() => { console.log('onClear'); }}
          onCancel={() => { console.log('onCancel'); }}
          onFocus={() => { console.log('onFocus'); }}
          onBlur={() => { console.log('onBlur'); }}
        />
        <SearchBar
          {...getFieldProps('SearchBar2')}
          placeholder="地图搜索"
          onSubmit={(value) => { console.log(`onSubmit${value}`); }}
          onClear={() => { console.log('onClear'); }}
          onCancel={() => { console.log('onCancel'); }}
        />
        <SearchBar
          value=""
          placeholder="取消按钮总是显示"
          onSubmit={(value) => { console.log(`onSubmit${value}`); }}
          onClear={() => { console.log('onClear'); }}
          onCancel={() => { console.log('onCancel'); }}
          showCancelButton
        />
        <SearchBar placeholder="搜索框被禁用" disablSearch />
      </div>
    );
  },
});
SearchBarExample = createForm()(SearchBarExample);
ReactDOM.render(<SearchBarExample />, mountNode);

API

SearchBar