如何设置搜索框SearchBar_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

搜索场景的输入框组件，在信息池中缩小范围，快速而轻松地获取目标信息。SearchBar 输入框在个别情况下会出现闪动的情况，需要使用 enableNative 进行处理。SearchBar 输入框在手写输入情况下，部分安卓手机会出现连续输入现象，只需要将 controlled 属性设置为 false 即可。

属性

属性	类型	必填	默认值	说明
value	string	否	-	搜索框的值
autoFocus	boolean	否	false	自动聚焦，iOS 可能会失效
bizIconType	string	否	'AudioFill'	辅助图标类型
cancelText	string	否	"取消"	取消按钮文案
className	string	否	-	类名
controlled	boolean	否	false	是否受控模式
disabled	boolean	否	false	是否禁用
enableNative	boolean	否	false	是否启用 Native 渲染
id	string		否	表单元素 id
maxLength	number	否	-	最大长度
name	string	否	-	表单元素 name
placeholder	string	否	-	提示文字
showBizIcon	boolean	否	false	是否展示辅助图标
showCancelButton	boolean	否	false	是否显示取消按钮
showVoice	boolean	否	false	是否展示语音图标
type	'text' \| 'number' \| 'idcard' \| 'digit' \| 'numberpad' \| 'digitpad' \| 'idcardpad'	否	'text'	搜索框的类型

事件

事件名	说明	类型
onChange	表单触发变更回调	`(v: any) => void`
onBlur	失去焦点时触发回调	`(v: string) => void`
onBizIconTap	点击语音图标回调	`() => void`
onCancel	点击取消回调	`(v: string) => void`
onClear	点击删除回调	`(v: string) => void`
onFocus	聚焦时触发回调	`(v: string) => void`
onInput	input 输入回调	`(v: string) => void`
onSubmit	submit 回调	`(v: string) => void`
onVoiceTap	点击语音图标回调	`() => void`

样式类

类名	说明
amd-search-bar	整体样式
amd-search-bar-focus	获取焦点时整体样式
amd-search-bar-input	内部输入框样式
amd-search-bar-input-focus	获取焦点时输入框样式
amd-search-bar-synthetic	search 图标样式
amd-search-bar-synthetic-icon	search 图标样式
amd-search-bar-value	input 组件样式
amd-search-bar-clear-icon	清除图标样式
amd-search-bar-biz-icon	额外图标样式
amd-search-bar-cancel-container	取消按钮样式
amd-search-bar-cancel-container-show	取消按钮样式
amd-search-bar-cancel	取消按钮样式

CSS 变量

CSS 变量名称	说明
--am-color-brand-1	输入光标颜色

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <demo-block title="基础用法" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="请输入内容" 
      value="{{basicValue}}" 
      onInput="handleBasicInput" 
      onClear="handleBasicClear"/>
  </demo-block>
  <demo-block title="取消按钮常显" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="请输入内容" 
      showCancelButton
      value="{{withCancelValue}}" 
      onInput="handleWithCancelInput" 
      onClear="handleBasicClear"
      onCancel="handleCancelWithCancel"/>
  </demo-block>
  <demo-block title="获取焦点后显示取消按钮" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="请输入内容" 
      value="{{focusWithCancelValue}}" 
      showCancelButton="{{focusWithCancelFocus}}"
      onInput="handleFocusWithCancelInput" 
      onClear="handleFocusWithCancelClear"
      onCancel="handleFocusCancelWithCancel"
      onBlur="handleFocusCancelWithBlur"
      onFocus="handleFocusCancelWithFocus"/>
  </demo-block>
  <demo-block title="额外Voice图标" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="请输入内容" 
      showBizIcon
      value="{{voiceValue}}" 
      onInput="handleVoiceInput" 
      onClear="handleVoiceClear"
      onBizIconTap="handleTapVoice"/>
  </demo-block>
  <demo-block title="支持唤起数字键盘" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="请输入内容" 
      value="{{numberValue}}" 
      type="number"
      onInput="handleNumberInput" 
      onClear="handleNumberClear"/>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    value: '',
    showVoice: false,
    showBizIcon: false,
    basicValue: '',
    withCancelValue: '',
    voiceValue: '',
    numberValue: '',
    focusWithCancelValue: '',
    focusWithCancelFocus: false,
  },
  handleBasicInput(value) {
    this.setData({ basicValue: value });
  },
  handleBasicClear() {
    this.setData({ basicValue: '' });
  },
  handleWithCancelInput(value) {
    this.setData({ withCancelValue: value });
  },
  handleWithCancelClear() {
    this.setData({ withCancelValue: '' });
  },
  handleCancelWithCancel() {
    this.setData({ withCancelValue: '' });
    my.showToast({ content: 'click cancel', duration: 1000 });
  },
  handleVoiceInput(value) {
    this.setData({ voiceValue: value });
  },
  handleVoiceClear() {
    this.setData({ voiceValue: '' });
  },
  handleTapVoice() {
    my.showToast({ content: 'click voice', duration: 1000 });
  },
  handleFocusWithCancelInput(value) {
    this.setData({ focusWithCancelValue: value });
  },
  handleFocusWithCancelClear() {
    this.setData({ focusWithCancelValue: '' });
  },
  handleFocusCancelWithCancel() {
    this.setData({ focusWithCancelValue: '' });
    my.showToast({ content: 'click cancel', duration: 1000 });
  },
  handleFocusCancelWithFocus() {
    this.setData({ focusWithCancelFocus: true });
  },
  handleFocusCancelWithBlur() {
    this.setData({ focusWithCancelFocus: false });
  },
  handleNumberInput(value) {
    this.setData({ numberValue: value });
  },
  handleNumberClear() {
    this.setData({ numberValue: '' });
  },
});

index.json 的代码示例如下：

{
  "defaultTitle": "SearchBar",
  "usingComponents": {
    "search-bar": "antd-mini/es/SearchBar/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}