SearchBar
The search function allows text query for the users. On basis of the current page contents, the user can perform exact search or fuzzy search to filter and locate contents and increase productivity in queries. When the search bar is activated, the cancel button appears. Note: For the purpose of UI presentation only. No service logic function is available.
Sample Code
copy
// API-DEMO page/component/search-bar/search-bar.json
{
"defaultTitle": "Mini Program AntUI component library",
"usingComponents": {
"search-bar": "mini-antui/es/search-bar/index"
}
}
copy
<!-- API-DEMO page/component/search-bar/search-bar.axml -->
<view>
<search-bar
value="{{value}}"
placeholder="Search "
onInput="handleInput"
onClear="handleClear"
onFocus="handleFocus"
onBlur="handleBlur"
onCancel="handleCancel"
onSubmit="handleSubmit"
showCancelButton="{{false}}" />
</view>
copy
// API-DEMO page/component/search-bar/search-bar.js
Page({
data: {
value: 'Food',
},
handleInput(value) {
this.setData({
value,
});
},
handleClear(value) {
this.setData({
value: '',
});
},
handleFocus() {},
handleBlur() {},
handleCancel() {
this.setData({
value: '',
});
},
handleSubmit(value) {
my.alert({
content: value,
});
},
});
Attributes
Property | Description | Type | Default | Required |
value | Current value in search box. | String | - | No |
placeholder | Placeholder. | String | - | No |
focus | Get cursor automatically. | Boolean | false | No |
onInput | Trigger on keyboard input. | (value: String) => void | - | No |
onClear | Trigger on clicking clear icon. | (val: String) => void | - | No |
onFocus | Trigger on getting focus. | () => void | - | No |
onBlur | Trigger on losing focus. | () => void | - | No |
onCancel | Trigger on clicking cancel. | () => void | - | No |
onSubmit | Trigger on clicking enter on button. | (val: String) => void | - | No |
disabled | Set disabled. | Boolean | - | No |
maxLength | Maximum number of characters allowed for input Number. | - | No | |
showCancelButton | Always show cancel button or not. | Boolean | - | No |