支付宝小程序扩展表单 搜索框·SearchBar

搜索提供了用户进行文本查询的功能，用户可以针对当前页面的内容通过精确搜索和模糊搜索进行内容筛选和定位，提高查询效率。搜索栏激活后出现取消按钮。

说明：仅用于 UI 展示没有对应的业务逻辑功能。

扫码体验

示例代码

{
 "defaultTitle": "Search-bar",
 "usingComponents": {
   "search-bar": "mini-ali-ui/es/search-bar/index"
 }
}
<view>
 <search-bar
   value="{{value}}"
   focus="{{true}}"
   disabled="{{false}}"
   maxLength="{{20}}"
   showVoice="{{showVoice}}"
   placeholder="搜索"
   onInput="handleInput"
   onClear="handleClear"
   onFocus="handleFocus"
   onBlur="handleBlur"
   onCancel="handleCancel"
   onSubmit="handleSubmit"
   showCancelButton="{{false}}" />
</view>
<view>是否展示Voice图标
<checkbox onChange='onChange'/>
</view>
Page({
 data: {
   value: '',
   showVoice: false,
 },
 handleInput(value) {
   this.setData({
     value,
   });
 },
 handleClear() {
   this.setData({
     value: '',
   });
 },
 handleFocus() {},
 handleBlur() {},
 handleCancel() {
   this.setData({
     value: '',
   });
 },
 onChange(e) {
   this.setData({
     showVoice: e.detail.value,
   });
 },
});

属性