SearchBar

2021-07-06 11:36

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