SearchBar

2022-07-29 06:32

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

Attribute Name	Description	Type	Default	Mandatory
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