Merge pull request #843 from nwind/master

完善 select 文档

docs/components/form/options.md

@@ -390,6 +390,38 @@ order: 2
 }
 ```
 
+## 检索 searchable
+
+可以配置 `"searchable": true` 显示前端过滤，适合用于有大量内容的列表。
+
+```schema:height="400" scope="body"
+{
+    "type": "form",
+    "controls": [
+        {
+            "label": "选项",
+            "type": "select",
+            "name": "select",
+            "searchable": true,
+            "options": [
+                {
+                    "label":"A",
+                    "value":"a"
+                },
+                {
+                    "label":"B",
+                    "value":"b"
+                },
+                {
+                    "label":"C",
+                    "value":"c"
+                }
+            ]
+        }
+    ]
+}
+```
+
 ## 拼接符 delimiter
 
 多选模式下，默认表单项值为选中的选项的`value`值，用默认拼接符`,`拼接，如下
@@ -1243,10 +1275,10 @@ order: 2
 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
 
 | 属性名       | 类型                              | 默认值    | 说明                                                                  |
-| ------------ | --------------------------------- | --------- | ---------------------------------------------------------------------- |
+|--------------|-----------------------------------|-----------|---------------------------------------------------------------------|
 | options      | `Array<object>`或`Array<string>`  |           | 选项组，供用户选择                                                     |
 | source       | `string`或 [API](../../types/api) |           | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象           |
-| multiple     | `boolean`                         | `false`   | 是否多选                                                               |
+| multiple     | `boolean`                         | `false`   | 是否支持多选                                                          |
 | labelField   | `boolean`                         | `"label"` | 标识选项中哪个字段是`label`值                                         |
 | valueField   | `boolean`                         | `"value"` | 标识选项中哪个字段是`value`值                                         |
 | joinValues   | `boolean`                         | `true`    | 是否拼接`value`值                                                     |

docs/components/form/select.md

@@ -42,12 +42,14 @@ order: 48
 }
 ```
 
+更多设置项请参考 [Options](./options.md)
+
 ## 属性表
 
 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
 
 | 属性名          | 类型                              | 默认值       | 说明                                                                                                                |
-| --------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
+|-----------------|-----------------------------------|--------------|-------------------------------------------------------------------------------------------------------------------|
 | options         | `Array<object>`或`Array<string>`  |              | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options)                                           |
 | source          | `string`或 [API](../../types/api) |              | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source)                                        |
 | autoComplete    | [API](../../types/api)            |              | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete)                                         |
@@ -60,6 +62,8 @@ order: 48
 | checkAllLabel   | `string`                          | `全选`       | 全选的文字                                                                                                          |
 | defaultCheckAll | `boolean`                         | `false`      | 默认是否全选                                                                                                        |
 | creatable       | `boolean`                         | `false`      | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable)                                                |
+| multiple        | `boolean`                         | `false`      | [多选](./options#多选-multiple)                                                                                     |
+| searchable      | `boolean`                         | `false`      | [检索](./options#检索-searchable)                                                                                   |
 | createBtnLabel  | `string`                          | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9)                                                          |
 | addControls     | Array<[表单项](./formitem)>       |              | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols)  |
 | addApi          | [API](../types/api)               |              | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi)                         |

docs/start/getting-started.md

@@ -3,6 +3,15 @@ title: 快速开始
 description:
 ---
 
+amis 有两种使用方法：
+
+- [npm](#npm)
+- [JS SDK](#SDK)
+
+npm 适合用在 React 项目中，可以完整使用 amis 的所有功能，方便扩展。
+
+SDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式难以支持 [自定义组件](./custom)，只能使用 amis 内置的组件。
+
 ## npm
 
 ### 安装
@@ -141,11 +150,12 @@ class MyComponent extends React.Component<any, any> {
     });
   ```
 
-  这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的key并不一定必须是 data , 你也可以是其它key，但必须配合schema中的 `detectField` 属性一起使用。 如：
+  这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectField` 属性一起使用。 如：
 
   ```jsx
   () =>
-    renderAmis({
+    renderAmis(
+      {
         //其它配置
         detectField: 'somekey'
       },
@@ -153,7 +163,8 @@ class MyComponent extends React.Component<any, any> {
         somekey: {
           username: 'amis'
         }
-    });
+      }
+    );
   ```
 
 - `env` 环境变量，可以理解为这个渲染器工具的配置项，需要调用者实现部分接口。
@@ -229,71 +240,12 @@ class MyComponent extends React.Component<any, any> {
 
 ## SDK
 
-SDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式不支持 [自定义组件](./custom)，只能使用 amis 内置的组件。
-
 JSSDK 的代码从以下地址获取：
 
 - JS： https://houtai.baidu.com/v2/jssdk
 - CSS： https://houtai.baidu.com/v2/csssdk
 
-然后在页面中插入下面的代码就能渲染出来了：
+以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动，需要将这两个文件下载到本地，分别命名为 sdk.js 和 sdk.css，然后类似如下的方式使用:
-
-```js
-(function () {
-  var amis = amisRequire('amis/embed');
-  amis.embed(
-    '#container',
-    {
-      type: 'page',
-      title: 'AMIS Demo',
-      body: 'This is a simple amis page.'
-    },
-    {
-      // props 一般不用传。
-    },
-    {
-      // env
-      fetcher: () => {
-        // 可以不传，用来实现 ajax 请求
-      },
-
-      jumpTo: () => {
-        // 可以不传，用来实现页面跳转
-      },
-
-      updateLocation: () => {
-        // 可以不传，用来实现地址栏更新
-      },
-
-      isCurrentUrl: () => {
-        // 可以不传，用来判断是否目标地址当前地址。
-      },
-
-      copy: () => {
-        // 可以不传，用来实现复制到剪切板
-      },
-
-      notify: () => {
-        // 可以不传，用来实现通知
-      },
-
-      alert: () => {
-        // 可以不传，用来实现提示
-      },
-
-      confirm: () => {
-        // 可以不传，用来实现确认框。
-      }
-    }
-  );
-})();
-```
-
-注意：以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动，如果你的页面已经完成功能回归，请直接使用某个固定地址，这样才不会因为 amis 升级而导致你的页面不可用。
-
-另外，sdk 代码也伴随 npm 一起发布了，不使用 CDN 版本，直接替换成 npm 包里面的 `amis/sdk.js` 和 `amis/sdk.css` 即可。
-
-完整示例:
 
 ```html
 <!DOCTYPE html>
@@ -336,3 +288,52 @@ JSSDK 的代码从以下地址获取：
   </body>
 </html>
 ```
+
+`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在前面也有介绍。
+
+```js
+amis.embed(
+  '#root',
+  {
+    type: 'page',
+    title: 'AMIS Demo',
+    body: 'This is a simple amis page.'
+  },
+  {
+    // props 一般不用传。
+  },
+  {
+    fetcher: (url, method, data, config) => {
+      // 可以不传，用来实现 ajax 请求
+    },
+
+    jumpTo: (location) => {
+      // 可以不传，用来实现页面跳转
+    },
+
+    updateLocation: (location, replace) => {
+      // 可以不传，用来实现地址栏更新
+    },
+
+    isCurrentUrl: (url) => {
+      // 可以不传，用来判断是否目标地址当前地址。
+    },
+
+    copy: (content) => {
+      // 可以不传，用来实现复制到剪切板
+    },
+
+    notify: (type, msg) => {
+      // 可以不传，用来实现通知
+    },
+
+    alert: (content) => {
+      // 可以不传，用来实现提示
+    },
+
+    confirm: (content) => {
+      // 可以不传，用来实现确认框。
+    }
+  }
+);
+```