docs: AutoComplete document and demo improvement (#4840)

*  AutoComplete document and demo improvement

 + add a non-case-sensitive demo, close #4834.
 + remove confusing descriptions from document, close #4805.

* add snapshot
This commit is contained in:
陆离 2017-02-13 15:45:49 +08:00 committed by Benjy Cui
parent e5ccc1d4ba
commit 135fd52afb
5 changed files with 79 additions and 4 deletions

View File

@ -85,6 +85,50 @@ exports[`test renders ./components/auto-complete/demo/basic.md correctly 1`] = `
</div>
`;
exports[`test renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
<div
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
style="width:200px;">
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox">
<div
class="ant-select-selection__rendered">
<div
class="ant-select-selection__placeholder"
style="display:block;user-select:none;-webkit-user-select:none;"
unselectable="unselectable">
try to type \`b\`
</div>
<ul>
<li
class="ant-select-search ant-select-search--inline">
<div
class="ant-select-search__field__wrap">
<input
class="ant-input ant-input ant-select-search__field"
type="text"
value="" />
<span
class="ant-select-search__field__mirror" />
</div>
</li>
</ul>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable">
<b />
</span>
</div>
</div>
`;
exports[`test renders ./components/auto-complete/demo/options.md correctly 1`] = `
<div
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"

View File

@ -0,0 +1,31 @@
---
order: 3
title:
zh-CN: 不区分大小写
en-US: Non-case-sensitive AutoComplete
---
## zh-CN
不区分大小写的 AutoComplete
## en-US
A non-case-sensitive AutoComplete
````jsx
import { AutoComplete } from 'antd';
const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
function Complete() {
return (<AutoComplete
style={{ width: 200 }}
dataSource={dataSource}
placeholder="try to type `b`"
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
/>);
}
ReactDOM.render(<Complete />, mountNode);
````

View File

@ -1,5 +1,5 @@
---
order: 3
order: 4
title:
zh-CN: 查询模式 - 不确定类目
en-US: Lookup-Patterns - Uncertain Category

View File

@ -17,7 +17,6 @@ When there is a need for autocomplete functionality.
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
Since `AutoComplete` is based on `Select`, so besides the following API, `AutoComplete` has the same API as `Select`.
| Property | Description | Type | Default |
|----------------|----------------------------------|------------|--------|
@ -31,3 +30,4 @@ Since `AutoComplete` is based on `Select`, so besides the following API, `AutoCo
| placeholder | placeholder of input | string | - |
| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |

View File

@ -2,7 +2,7 @@
category: Components
subtitle: 自动完成
type: Data Entry
cols: 1
cols: 2
title: AutoComplete
---
@ -18,7 +18,6 @@ title: AutoComplete
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
因为 `AutoComplete` 是基于 `Select` 封装的,所以除了以下 API 外,`AutoComplete` 跟 `Select` 拥有一样的 API。
| 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------|------------|---------|
@ -33,3 +32,4 @@ const dataSource = ['12345', '23456', '34567'];
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`。 | string | `children` |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`。 | boolean or function(inputValue, option) | true |