All Products
Search
Document Center

SearchBar

Last Updated: Feb 04, 2021

This section describes SearchBar, a search box.

Property Description Type Default value Mandatory
value Current value of SearchBar. String - false
placeholder placeholder String - false
focus Obtains the cursor automatically. Boolean false false
onInput Triggered when keyboard input occurs. (value: String) => void - false
onClear Triggered when the clear icon is tapped. (val: String) => void - false
onFocus Triggered when the focus is obtained. () => void - false
onBlur Triggered when the focus is lost. () => void - false
onCancel Triggered when you tap “cancel”. () => void - false
onSubmit Triggered when you tap Enter on the keyboard. (val: String) => void - false
disabled Whether to disable. Boolean - false
maxLength Maximum number of characters allowed. Number - false
showCancelButton Whether to always display the cancel button. Boolean - false

Sample code

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "search-bar": "mini-antui/es/search-bar/index"
  5. }
  6. }
  1. <view>
  2. <search-bar
  3. value="{{value}}"
  4. placeholder="Search"
  5. onInput="handleInput"
  6. onClear="handleClear"
  7. onFocus="handleFocus"
  8. onBlur="handleBlur"
  9. onCancel="handleCancel"
  10. onSubmit="handleSubmit"
  11. showCancelButton="{{false}}" />
  12. </view>
  1. Page({
  2. data: {
  3. value: 'Fine food',
  4. },
  5. handleInput(value) {
  6. this.setData({
  7. value,
  8. });
  9. },
  10. handleClear(value) {
  11. this.setData({
  12. value: '',
  13. });
  14. },
  15. handleFocus() {},
  16. handleBlur() {},
  17. handleCancel() {
  18. this.setData({
  19. value: '',
  20. });
  21. },
  22. handleSubmit(value) {
  23. my.alert({
  24. content: value,
  25. });
  26. },
  27. });