diff --git a/example/pages/search/index.js b/example/pages/search/index.js
index 238d25b0..2c08c126 100644
--- a/example/pages/search/index.js
+++ b/example/pages/search/index.js
@@ -1,20 +1,27 @@
 Page({
   data: {
-    inputValue: '',
-    focus: true
+    value: ''
   },
 
-  searchChange(e) {
+  onChange(e) {
     this.setData({
-      inputValue: e.detail.value
+      value: e.detail
     });
   },
 
-  searchDone(e) {
-    console.error('search', e.detail.value)
+  onSearch(event) {
+    if (event.detail) {
+      wx.showToast({
+        title: '搜索：' + event.detail,
+        icon: 'none'
+      });
+    }
   },
 
-  handleCancel() {
-    console.error('cancel')
+  onCancel() {
+    wx.showToast({
+      title: '取消',
+      icon: 'none'
+    });
   }
 });
diff --git a/example/pages/search/index.json b/example/pages/search/index.json
index 392bdbfb..2441410e 100644
--- a/example/pages/search/index.json
+++ b/example/pages/search/index.json
@@ -1,8 +1,7 @@
 {
   "navigationBarTitleText": "Search 搜索",
   "usingComponents": {
-    "van-icon": "../icon/index",
-    "van-search": "../../dist/search/index",
-    "van-panel": "../../dist/panel/index"
+    "demo-block": "../../components/demo-block/index",
+    "van-search": "../../dist/search/index"
   }
 }
diff --git a/example/pages/search/index.wxml b/example/pages/search/index.wxml
index a3aacec6..bdea9dc6 100644
--- a/example/pages/search/index.wxml
+++ b/example/pages/search/index.wxml
@@ -1,48 +1,31 @@
-<van-panel title='基本用法'>
+<demo-block title="基本用法">
   <van-search
-    alignLeft="{{ true }}"
-    placeholder="搜索..."
-    keyword="{{ inputValue }}"
-    placeholder="搜索商品"
-    focus="{{ focus }}"
-    bindchange="searchChange"
-    bindsearch="searchDone"
+    value="{{ value }}"
+    placeholder="请输入搜索关键词"
+    bind:change="onChange"
+    bind:search="onSearch"
   />
-</van-panel>
+</demo-block>
 
-<van-panel title='不可用'>
+<demo-block title="监听对应事件">
   <van-search
-    alignLeft="{{ true }}"
-    placeholder="搜索..."
-    disabled="{{ true }}"
-    placeholder="搜索商品"
+    value="{{ value }}"
+    show-action
+    placeholder="请输入搜索关键词"
+    bind:change="onChange"
+    bind:search="onSearch"
+    bind:cancel="onCancel"
   />
-</van-panel>
+</demo-block>
 
-<van-panel title='自定义样式'>
+<demo-block title="自定义行动按钮">
   <van-search
-    alignLeft="{{ true }}"
-    placeholder="搜索..."
-    searchStyle="height: 88rpx; padding: 0 30rpx; background: {{ searchbg || '#F2F2F2' }};"
-    inputStyle="height: 56rpx; border-radius: 8rpx;"
-    keyword="{{ inputValue }}"
-    placeholder="搜索商品"
-    focus="{{ focus }}"
-    bindchange="searchChange"
-    bindsearch="searchDone"
-  />
-</van-panel>
-
-<van-panel title='取消按钮'>
-  <van-search
-    alignLeft="{{ true }}"
-    placeholder="搜索..."
-    keyword="{{ inputValue }}"
-    placeholder="搜索商品"
-    focus="{{ focus }}"
-    useCancel="{{ true }}"
-    bindchange="searchChange"
-    bindsearch="searchDone"
-    bindcancel="handleCancel"
-  />
-</van-panel>
+    value="{{ value }}"
+    placeholder="请输入搜索关键词"
+    use-action-slot
+    bind:change="onChange"
+    bind:search="onSearch"
+  >
+    <view slot="action" bind:tap="onSearch">搜索</view>
+  </van-search>
+</demo-block>
diff --git a/package.json b/package.json
index 3c9700f5..6607648b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant-weapp",
-  "version": "3.0.10",
+  "version": "0.0.1-beta",
   "description": "高颜值、好用、易扩展的小程序 UI 库，Powered by 有赞",
   "main": "app.js",
   "directories": {
diff --git a/packages/search/README.md b/packages/search/README.md
index 9d0db097..2ba25aa8 100644
--- a/packages/search/README.md
+++ b/packages/search/README.md
@@ -3,63 +3,73 @@
 ### 使用指南
 在 index.json 中引入组件
 ```json
-{
-  "usingComponents": {
-    "van-search": "/packages/search/index"
-  }
+"usingComponents": {
+  "van-search": "/packages/search/index"
 }
 ```
 
-### 代码演示
+#### 基础用法
+value 用于控制搜索框中的文字
 
-```wxml
+```html
+<van-search value="{{ value }}" placeholder="请输入搜索关键词" />
+```
+
+#### 监听对应事件
+Search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
+
+```html
 <van-search
-  placeholder="搜索..."
-  keyword="{{ inputValue }}"
-  placeholder="搜索商品"
-  focus="{{ focus }}"
-  bindchange="searchChange"
-  bindsearch="searchDone"
+  v-model="value"
+  placeholder="请输入搜索关键词"
+  show-action
+  @search="onSearch"
+  @cancel="onCancel"
 />
 ```
 
-```js
-data: {
-  inputValue: '',
-  focus: true
-},
-searchChange(e) {
-  this.setData({
-    inputValue: e.detail.value
-  });
-},
+#### 自定义行动按钮
 
-searchDone(e) {
-  console.log('search', e.detail.value)
-}
+Search 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。
+
+```html
+<van-search
+  v-model="value"
+  placeholder="请输入搜索关键词"
+  use-action-slot
+  @search="onSearch"
+>
+  <view slot="action" @click="onSearch">搜索</view>
+</van-search>
 ```
 
 ### API
+Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`placeholder`、`readony`、`autofocus` 等
 
-#### 参数
-| 名称             | 类型        | 是否必须 | 默认  | 描述                                                |
-| ---------------- | ----------- | -------- | ----- | --------------------------------------------------- |
-| keyword          | String      | 否       | 无    | 默认搜索关键字                                      |
-| disabled         | Boolean     | 否       | false | 是否禁用                                          |
-| focus            | Boolean     | 否       | false | 是否获取焦点                                       |
-| useCancel        | Boolean     | 否       | false | 是否显示取消按钮                                    |
-| cancelText       | String      | 否       | 取消  | 取消按钮文字                                        |                          |
-| placeholder      | String      | 否       | 无    | 输入框占位字符串                                    |
-| cancelStyle      | String      | 否       | 无     | “取消”的样式                                      |
-| inputStyle       | String      | 否       | 无     | “输入框”的样式
-| searchStyle      | String      | 否       | 无     | “整个搜索”的样式
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| value | 当前输入的值 | `String | Number` | - |
+| background | 搜索框背景色 | `String` | `#f2f2f2` |
+| show-action | 是否在搜索框右侧显示取消按钮 | `Boolean` | `false` |
+| use-action-slot | 是否使用 action slot | `Boolean` | `false` |
+| disabled | 是否禁用输入框 | `Boolean` | `false` |
+| readonly | 是否只读 | `Boolean` | `false` |
+| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | `Number` | `-1` |
+| focus | 获取焦点 | `Boolean` | `false` |
 
-#### 事件
+### Event
+Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
 
-| 名称             | 类型        | 是否必须 | 默认  | 描述
-| ---------------- | ----------- | -------- | ----- | ------|
-| bindcancel       | EventHandle | 否       | 无    | 取消按钮点击时触发
-| bindsearch       | EventHandle | 否       | 无    | 键盘点击确认时触发
-| bindchange       | EventHandle | 否       | 无    | 内容改变时触发
-| bindblur       | EventHandle | 否       | 无    | 焦点丢失时触发
-| bindfocus       | EventHandle | 否       | 无    | 焦点聚焦时触发
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| search | 确定搜索时触发 | event.detail: 当前输入值 |
+| change | 输入内容变化时触发 | event.detail: 当前输入值 |
+| cancel | 取消搜索搜索时触发 | - |
+| focus | 输入框聚焦时触发 | - |
+| blur | 输入框失焦时触发 | - |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
diff --git a/packages/search/index.js b/packages/search/index.js
index 42e1a1b7..7f051545 100644
--- a/packages/search/index.js
+++ b/packages/search/index.js
@@ -1,67 +1,57 @@
 Component({
-  externalClasses: ['search-class', 'input-class', 'cancel-class'],
+  externalClasses: ['custom-class', 'cancel-class'],
+
+  options: {
+    multipleSlots: true
+  },
+
   properties: {
-    cancelText: {
+    disabled: Boolean,
+    readonly: Boolean,
+    showAction: Boolean,
+    useActionSlot: Boolean,
+    placeholder: String,
+    value: {
       type: String,
-      value: '取消'
-    },
-    disabled: {
-      type: Boolean,
-      value: false
-    },
-    focus: {
-      type: Boolean,
-      value: false
-    },
-    keyword: {
-      type: String,
-      value: ''
-    },
-    show: {
-      type: Array,
-      value: ['icon', 'cancel']
-    },
-    placeholder: {
-      type: String,
-      value: '请输入查询关键字',
-      observer(newVal) {
-        this.setData({
-          inputWidth: `${(newVal.length * 14) + 45}px`
-        });
+      observer(currentValue) {
+        this.setData({ currentValue });
       }
     },
-    useCancel: {
-      type: Boolean
+    background: {
+      type: String,
+      value: '#f2f2f2'
     },
-    searchStyle: String,
-    cancelStyle: String,
-    inputStyle: String,
+    maxlength: {
+      type: Number,
+      value: -1
+    }
   },
-  data: {
-    inputWidth: 'auto'
+
+  attached() {
+    this.setData({ currentValue: this.data.value });
   },
+
   methods: {
-    blur() {
-      this.triggerEvent('blur');
+    onChange(event) {
+      this.triggerEvent('change', event.detail);
     },
-    clearInput() {
-      this.setData({
-        focus: true
-      });
-      this.triggerEvent('change', { value: '' });
-    },
-    cancelSearch() {
+
+    onCancel() {
+      this.setData({ currentValue: '' });
       this.triggerEvent('cancel');
+      this.triggerEvent('change', '');
     },
-    focus() {
+
+    onSearch() {
+      this.triggerEvent('search', this.data.currentValue);
+    },
+
+    onFocus() {
       this.triggerEvent('focus');
     },
-    inputChange(e) {
-      this._inputvalue = e.detail.value;
-      this.triggerEvent('change', { value: e.detail.value });
-    },
-    search(e) {
-      this.triggerEvent('search', { value: e.detail.value });
+
+    onBlur() {
+      this.triggerEvent('blur');
     }
   }
 });
diff --git a/packages/search/index.json b/packages/search/index.json
index 32640e0d..e39fb2d0 100644
--- a/packages/search/index.json
+++ b/packages/search/index.json
@@ -1,3 +1,7 @@
 {
-  "component": true
-}
\ No newline at end of file
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index",
+    "van-field": "../field/index"
+  }
+}
diff --git a/packages/search/index.pcss b/packages/search/index.pcss
index c3260c4f..3a2559a9 100644
--- a/packages/search/index.pcss
+++ b/packages/search/index.pcss
@@ -1,89 +1,41 @@
+@import '../common/index.pcss';
+
 .van-search {
+  display: flex;
+  padding: 7px 15px;
+  align-items: center;
   box-sizing: border-box;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: transparent;
-  padding:5px 10px;
-}
 
-.van-search.center-placeholder {
-  background: #ffffff;
-}
+  &__field {
+    flex: 1;
+    border-radius: 4px;
 
-.van-search.center-placeholder .van-search__form {
-  margin-left: 50%;
-  transform: translateX(-50%);
-  border: none;
-}
+    &__left-icon {
+      color: $gray-dark;
+    }
+  }
 
-.van-search.van-cell::after {
-  display: none;
-}
+  &--show-action {
+    padding-right: 0;
+  }
 
-.van-search__form {
-  display: flex;
-  flex: 1;
-  background:#ffffff;
-  border-radius: 4rpx;
-  height: 64rpx;
-  line-height: 56rpx;
-  justify-content: space-between;
-  align-items: center;
-}
+  input {
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+  }
 
-.van-search picker {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding-right: 20rpx;
-}
+  &__action {
+    padding: 0 10px;
+    font-size: 14px;
+    line-height: 30px;
+    color: $gray-darker;
 
-.van-search__form .picker {
-  position: relative;
-  width: 110rpx;
-  height: 100%;
-  color: #666;
-  font-size: 28rpx;
-  margin-left: 20rpx;
-}
-.van-search__form .picker::after {
-  content: '';
-  width: 0;
-  height: 0;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  margin-top: -6rpx;
-  border-top: 12rpx solid #333;
-  border-right: 8rpx solid transparent;
-  border-left: 8rpx solid transparent;
-}
-.van-search__form input {
-  height: 100%;
-  flex: 1;
-  padding: 0 20rpx;
-  font-size: 28rpx;
-  color: #333;
-}
-.van-search__form icon {
-  margin-left: 20rpx;
-  line-height: 1;
-}
-
-.van-search__clear {
-  padding: 12rpx 20rpx;
-}
-
-.van-search__placeholder {
-  font-size: 28rpx;
-  color: #cacaca;
-}
-.van-search__cancel {
-  align-self: stretch;
-  display: inline-flex;
-  align-items: center;
-  padding-left: 30rpx;
-  font-size: 28rpx;
-  color: #3388FF;
+    &:active {
+      background-color: $active-color;
+    }
+  }
 }
diff --git a/packages/search/index.wxml b/packages/search/index.wxml
index 2d22fc0b..ea062c3b 100644
--- a/packages/search/index.wxml
+++ b/packages/search/index.wxml
@@ -1,40 +1,28 @@
 <view
-  class="van-search {{ searchClass }}"
-  style="{{ searchStyle }}"
+  class="van-search custom-class {{ showAction || useActionSlot ? 'van-search--show-action' : '' }}"
+  style="background: {{ background }}"
 >
-  <view
-    class="van-search__form {{ useCancel ? 'van-search__form--cancel' : '' }} input-class"
-    style="{{ inputStyle }}"
-  >
-    <icon type="search" size="15" color="#a9a9a9" />
-    <input
-      class="van-search__input"
-      placeholder="{{ placeholder }}"
-      placeholder-class="van-search__placeholder"
+  <view class="van-search__field">
+    <van-field
+      clearable
+      type="search"
+      left-icon="search"
+      border="{{ false }}"
       confirm-type="search"
-      bindfocus="focus"
-      bindblur="blur"
-      value="{{ keyword }}"
-      bindconfirm="search"
-      bindinput="inputChange"
-      focus="{{ focus }}"
+      value="{{ currentValue }}"
       disabled="{{ disabled }}"
-    />
-    <icon
-      wx:if="{{keyword}}"
-      class="van-search__clear"
-      type="clear"
-      size="14"
-      color="#bbb"
-      bindtap="clearInput"
+      readonly="{{ readony }}"
+      maxlength="{{ maxlength }}"
+      placeholder="{{ placeholder }}"
+      custom-style="padding: 3px 10px"
+      bind:blur="onBlur"
+      bind:focus="onFocus"
+      bind:change="onChange"
+      bind:confirm="onSearch"
     />
   </view>
-  <view
-    class="van-search__cancel cancel-class"
-    wx:if="{{ useCancel }}"
-    bindtap="cancelSearch"
-    style="{{ cancelStyle }}"
-  >
-    {{cancelText || '取消'}}
+  <view wx:if="{{ showAction || useActionSlot }}" class="van-search__action">
+    <slot wx:if="{{ useActionSlot }}" name="action" />
+    <view wx:else bind:tap="onCancel" class="cancel-class">取消</view>
   </view>
 </view>