搜尋方塊（SearchBar） - Mobile Platform as a Service

搜尋情境的輸入框組件，在資訊池中縮小範圍，快速而輕鬆地擷取目標資訊。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"
  }
}