Search 搜索

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

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

API

Search

输入框部分继承 Select.AutoComplete 的能力，可以直接用AutoComplete 的 api

ARIA and KeyBoard

代码示例

基础用法

查看源码在线预览

import { Search } from '@alifd/next';
function onSearch(v) {
    console.log(v);
}
const App = () => [
    <p key="1">simple</p>,
    <Search key="2" shape="simple" onSearch={onSearch} style={{width: '400px'}}/>,
    <p key="3">default</p>,
    <Search key="4" onSearch={onSearch} style={{width: '400px'}}/>,
    <p key="5">custom text </p>,
    <Search key="6" searchText="search" onSearch={onSearch} style={{width: '400px'}}/>,
    <p key="7">custom text widthout icon</p>,
    <Search key="8" hasIcon={false} searchText={<span style={{color: 'blue'}}>search</span>} onSearch={onSearch} style={{width: '400px'}}/>
];
ReactDOM.render(<App />, mountNode);

类别

简单用法

查看源码在线预览

import { Search } from '@alifd/next';
ReactDOM.render(<div>
    <h2>Normal</h2>
    <Search type="primary" placeholder="primary"/>
    <br/> <br/>
    <Search type="secondary" placeholder="Secondary"/>
    <br/> <br/>
    <Search type="normal" placeholder="normal"/>
    <br/> <br/>
    <div style={{background: '#333', padding: 20}}>
        <Search type="dark" placeholder="dark"/>
    </div>
    <h2>Simple</h2>
    <Search type="normal" shape="simple" placeholder="normal"/>
    <br/> <br/>
    <div style={{background: '#333', padding: 20}}>
        <Search shape="simple" type="dark" placeholder="dark"/>
    </div>
</div>, mountNode);

大小

通过size进行大小设置，支持large、medium

查看源码在线预览

import { Search } from '@alifd/next';
ReactDOM.render(<div>
    <Search
        size="large"
        defaultValue="large"
        searchText="Search"
        placeholder="What are you looking for..." />
    <br/><br/>
    <Search
        size="medium"
        defaultValue="medium"
        searchText="Search"
        placeholder="What are you looking for..." />
</div>, mountNode);

下拉框

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

查看源码在线预览

import { Search } from '@alifd/next';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            filter: [
                {
                    label: 'Products',
                    value: 'Products'
                },
                {
                    label: 'Products1',
                    value: 'Products1'
                },
                {
                    label: 'Products2',
                    value: 'Products2'
                },
                {
                    label: 'Products3',
                    value: 'Products3'
                },
                {
                    label: 'Products4',
                    value: 'Products4'
                },
                {
                    label: 'Products5',
                    value: 'Products5'
                },
                {
                    label: 'Products6',
                    value: 'Products6'
                },
                {
                    label: 'Products7',
                    value: 'Products7'
                },
                {
                    label: 'Products8',
                    value: 'Products8'
                },
                {
                    label: 'Products9',
                    value: 'Products9'
                },
                {
                    label: 'Products10',
                    value: 'Products10'
                },
                {
                    label: 'Suppliers',
                    value: 'Suppliers',
                    default: true
                }
            ],
            value: ''
        };
    }
    onSearch(value, filterValue) {
        console.log(value, filterValue);
    }
    onChange(value) {
        this.setState({
            value: value
        });
    }
    // value is filter value，obj is the search value
    onFilterChange(value) {
        console.log(value);
    }
    render() {
        return (<div>
            <Search onChange={this.onChange.bind(this)} onSearch={this.onSearch.bind(this)}
                filterProps={{autoWidth: false}}
                filter={this.state.filter} onFilterChange={this.onFilterChange.bind(this)}/>
        </div>);
    }
}
ReactDOM.render(<App/>, mountNode);

联想

查看源码在线预览

import { Search } from '@alifd/next';
const dataSource = [{
    label: 'Recent',
    value: 'Recent'
}, {
    label: 'dress',
    value: 'dress'
}, {
    label: 'sunglasses',
    value: 'sunglasses'
}, {
    label: 't-shirt',
    value: 't-shirt'
}];
class App extends React.Component {
    onSearch(value, filterValue) {
        console.log(value, filterValue);
    }
    onChange(value) {
        this.setState({
            value: value
        });
    }
    render() {
        return (
            <Search dataSource={dataSource} onChange={this.onChange.bind(this)}
                onSearch={this.onSearch.bind(this)}/>
        );
    }
}
ReactDOM.render(<App/>, mountNode);

自定义弹层

自定义下拉框内容。

查看源码在线预览

import { Search, Menu, Button } from '@alifd/next';
const menuData = [
    {
        label: 'Option 1',
        value: 'Option 1 Value',
        index: '1'
    }, {
        label: 'Option 2',
        value: 'Option 2 Value',
        index: '2'
    }, {
        label: 'Option 3',
        value: 'Option 3 Value',
        index: '3'
    }, {
        label: 'Option 4',
        value: 'Option 4 Value',
        index: '4'
    }
];
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            value: '111222',
            menuData: menuData
        };
        this.onVisibleChange = this.onVisibleChange.bind(this);
        this.onSearch = this.onSearch.bind(this);
        this.onChange = this.onChange.bind(this);
        this.onFocus = this.onFocus.bind(this);
    }
    renderMenu() {
        const menuData = this.state.menuData;
        return (<Menu onSelect={this.onSelect.bind(this)} rtl className="diy-menu" selectMode="single">
            <Menu.Group label="Recent" key="xxx">
                {menuData.map((item) => {
                    return (<Menu.Item key={item.value}>
                        {item.label}
                        <Button className="diy-menu-button" onClick={this.onDelete.bind(this, item.index)} text>Delete</Button>
                    </Menu.Item>);
                })}
            </Menu.Group>
        </Menu>);
    }
    onSearch(value) {
        console.log(value);
    }
    onChange(value) {
        this.setState({
            visible: value.length > 0,
            value: value
        });
    }
    onSelect(selectedKeys) {
        this.setState({
            visible: false,
            value: selectedKeys[0]
        });
    }
    onDelete(index, e) {
        e.stopPropagation();
        const menuData = this.state.menuData;
        const menuDataNew = [];
        menuData.forEach(function (item) {
            if (item.index !== index) {
                menuDataNew.push(item);
            }
        });
        this.setState({
            menuData: menuDataNew
        });
    }
    onFocus() {
        this.setState({
            visible: true
        });
    }
    onVisibleChange() {
        this.setState({
            visible: false
        });
    }
    render() {
        const {visible, value} = this.state;
        return (<div style={{width: 700}}>
            <Search
                onVisibleChange={this.onVisibleChange}
                popupContent={this.renderMenu()}
                visible={visible}
                value={value}
                onSearch={this.onSearch}
                onChange={this.onChange}
                onFocus={this.onFocus}
            />
        </div>);
    }
}
ReactDOM.render(<App/>, mountNode);

.diy-menu{
    /*width: 275px*/;
}
.diy-menu .next-menu-item a{
    display:none;
    float: right;
    cursor: pointer;
}
.diy-menu .next-menu-item:hover a{
    display:inline-block;
}
.diy-menu .diy-menu-button {
    float: right;
}
.diy-menu[dir=rtl] .diy-menu-button {
    float: left;
}

无障碍

按下Enter键调用onSearch事件去处理,请参考ARIA and KeyBoard。

查看源码在线预览

import { Search } from '@alifd/next';
ReactDOM.render(<div>
    <Search key="3" placeholder="Please enter the search content" onSearch={v => console.log(v)} searchText={<span>search</span>} style={{width: '400px'}}/>
</div>, mountNode);

相关区块

暂无相关区块