mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
2.7 KiB
2.7 KiB
order | title | ||||
---|---|---|---|---|---|
9 |
|
zh-CN
带有搜索按钮的自动补全输入框。
en-US
Autocomplete select with search field.
import { Input, Select, Button, Icon } from 'antd';
import jsonp from 'fetch-jsonp';
import querystring from 'querystring';
import classNames from 'classnames';
const Option = Select.Option;
let timeout;
let currentValue;
function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
function fake() {
const str = querystring.encode({
code: 'utf-8',
q: value,
});
jsonp(`https://suggest.taobao.com/sug?${str}`)
.then(response => response.json())
.then((d) => {
if (currentValue === value) {
const result = d.result;
const data = [];
result.forEach((r) => {
data.push({
value: r[0],
text: r[0],
});
});
callback(data);
}
});
}
timeout = setTimeout(fake, 300);
}
const SearchInput = React.createClass({
getInitialState() {
return {
data: [],
value: '',
focus: false,
};
},
handleChange(value) {
this.setState({ value });
fetch(value, data => this.setState({ data }));
},
handleSubmit() {
console.log('输入框内容是: ', this.state.value);
},
handleFocus() {
this.setState({ focus: true });
},
handleBlur() {
this.setState({ focus: false });
},
render() {
const btnCls = classNames({
'ant-search-btn': true,
'ant-search-btn-noempty': !!this.state.value.trim(),
});
const searchCls = classNames({
'ant-search-input': true,
'ant-search-input-focus': this.state.focus,
});
const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
return (
<div className="ant-search-input-wrapper" style={this.props.style}>
<Input.Group className={searchCls}>
<Select
combobox
value={this.state.value}
placeholder={this.props.placeholder}
notFoundContent=""
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
>
{options}
</Select>
<div className="ant-input-group-wrap">
<Button className={btnCls} onClick={this.handleSubmit}>
<Icon type="search" />
</Button>
</div>
</Input.Group>
</div>
);
},
});
ReactDOM.render(
<SearchInput placeholder="input search text" style={{ width: 200 }} />
, mountNode);