SearchBar 搜索框

搜索提供了用户进行文本查询的功能，用户可以针对当前页面的内容通过精确搜索和模糊搜索进行内容筛选和定位，提高查询效率。搜索栏激活后出现取消按钮。

说明：仅用于 UI 展示没有对应的业务逻辑功能。

扫码体验

示例代码

// API-DEMO page/component/search-bar/search-bar.json
{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "search-bar": "mini-antui/es/search-bar/index"
  }
}

<!-- API-DEMO page/component/search-bar/search-bar.axml -->
<view>
  <search-bar
    value="{{value}}"
    placeholder="搜索"
    onInput="handleInput"
    onClear="handleClear"
    onFocus="handleFocus"
    onBlur="handleBlur"
    onCancel="handleCancel"
    onSubmit="handleSubmit"
    showCancelButton="{{false}}" />
</view>

// API-DEMO page/component/search-bar/search-bar.js
Page({
  data: {
    value: '美食',
  },
  handleInput(value) {
    this.setData({
      value,
    });
  },
  handleClear(value) {
    this.setData({
      value: '',
    });
  },
  handleFocus() {},
  handleBlur() {},
  handleCancel() {
    this.setData({
      value: '',
    });
  },
  handleSubmit(value) {
    my.alert({
      content: value,
    });
  },
});

属性