SearchBar - Mobile Platform as a Service - Alibaba Cloud Documentation Center

A SearchBar component is an input box component in a search scenario. It can narrow down the scope of an information pool and easily and quickly obtain the target information. Sometimes, a SearchBar input box may flicker. Therefore, you need to use enableNative to avoid flicking. When you use your own handwriting to enter text into a SearchBar input box on some Android phones, the text will be entered continuously. In this case, set controlled to false.

Property

Property	Type	Required	Default value	Description
value	string	No	-	The value in the search bar.
autoFocus	boolean	No	false	Whether to enable auto-focus. This property may not take effect on iOS devices.
bizIconType	string	No	'AudioFill'	The icon of auxiliary icon.
cancelText	string	No	"Cancel"	The UI text for the Cancel button.
className	string	No	-	The class name.
controlled	boolean	No	false	Whether the search bar is controlled.
disabled	boolean	No	false	Whether to disable the component.
enableNative	boolean	No	false	Whether to enable Native rendering.
id	string		No	The ID of the form element.
maxLength	number	No	-	The maximum length.
name	string	No	-	The name of the form element.
placeholder	string	No	-	The prompt message.
showBizIcon	boolean	No	false	Whether to display the auxiliary icon.
showCancelButton	boolean	No	false	Whether to display the Cancel button.
showVoice	boolean	No	false	Whether to display the voice icon.
type	'text' \| 'number' \| 'idcard' \| 'digit' \| 'numberpad' \| 'digitpad' \| 'idcardpad'	No	'text'	The type of the search bar.

Event

Event name	Description	Type
onChange	Callback fired when the form is updated.	`(v: any) => void`
onBlur	Callback fired when the search bar loses its focus.	`(v: string) => void`
onBizIconTap	Callback fired when the voice icon is tapped.	`() => void`
onCancel	Callback fired when the Cancel button is tapped.	`(v: string) => void`
onClear	Callback fired when the Delete button is tapped.	`(v: string) => void`
onFocus	Callback fired when the focus is set on the search bar.	`(v: string) => void`
onInput	Callback fired when a user enters text into the input box.	`(v: string) => void`
onSubmit	Callback fired when a user submits text.	`(v: string) => void`
onVoiceTap	Callback fired when the voice icon is tapped.	`() => void`

Style class

Class name	Description
amd-search-bar	The style of the entire search bar.
amd-search-bar-focus	The style of the entire search bar when the focus is set on the search bar.
amd-search-bar-input	The style of the internal input box.
amd-search-bar-input-focus	The style of the input box when the focus is set on the input box.
amd-search-bar-synthetic	The style of the search icon.
amd-search-bar-synthetic-icon	The style of the search icon.
amd-search-bar-value	The style of the input component.
amd-search-bar-clear-icon	The style of the clear icon.
amd-search-bar-biz-icon	The style of an extra icon.
amd-search-bar-cancel-container	The style of the Cancel button.
amd-search-bar-cancel-container-show	The style of the Cancel button.
amd-search-bar-cancel	The style of the Cancel button.

CSS variable

CSS variable name	Description
--am-color-brand-1	The color of the cursor for entering text.

Code sample

Basic usage

The following shows an example of the code in the index.axml file:

<view>
  <demo-block title="Basic usage" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="Please enter the content" 
      value="{{basicValue}}" 
      onInput="handleBasicInput" 
      onClear="handleBasicClear"/>
  </demo-block>
  <demo-block title="The cancel button is always displayed" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="Please enter the content" 
      showCancelButton
      value="{{withCancelValue}}" 
      onInput="handleWithCancelInput" 
      onClear="handleBasicClear"
      onCancel="handleCancelWithCancel"/>
  </demo-block>
  <demo-block title="Display the cancel button after getting focus" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="Please enter the content" 
      value="{{focusWithCancelValue}}" 
      showCancelButton="{{focusWithCancelFocus}}"
      onInput="handleFocusWithCancelInput" 
      onClear="handleFocusWithCancelClear"
      onCancel="handleFocusCancelWithCancel"
      onBlur="handleFocusCancelWithBlur"
      onFocus="handleFocusCancelWithFocus"/>
  </demo-block>
  <demo-block title="extra Voice icon" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="Please enter the content" 
      showBizIcon
      value="{{voiceValue}}" 
      onInput="handleVoiceInput" 
      onClear="handleVoiceClear"
      onBizIconTap="handleTapVoice"/>
  </demo-block>
  <demo-block title="Support for evoking the numeric keypad" background="#f5f5f5" padding="0">
    <search-bar 
      placeholder="Please enter the content" 
      value="{{numberValue}}" 
      type="number"
      onInput="handleNumberInput" 
      onClear="handleNumberClear"/>
  </demo-block>
</view>

The following shows an example of the code in the index.js file:

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: '' });
  },
});

The following shows an example of the code in the index.json file:

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