SAP UI5应用里搜索功能的实现是怎样的

SAP UI5应用里搜索功能的实现是怎样的，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

在一个包含了list的XML视图里，使用SearchField标签页定义一个搜索按钮。点击之后，执行的事件处理函数为handleSearch：

<mvc:View controllerName="sapcp.cf.tutorial.app.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">	<Shell id="shell">	<App id="app">	<pages>	<Page id="page" title="{i18n>title}">	<subHeader>	<Bar>	<contentLeft>	<SearchField search="handleSearch"/>	</contentLeft>	</Bar>	</subHeader>	<content>	<List id="List" items="{/Products}">	<ObjectListItem type="Navigation" press="handleListItemPress" title="{ProductName}" number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }"	numberUnit="{i18n>currency}">	<attributes>	<ObjectAttribute text="{QuantityPerUnit}"/>	</attributes>	<firstStatus>	<ObjectStatus text="{= ${Discontinued}? 'Discontinued' : 'Available' }" state="{= ${Discontinued}? 'Error' : 'Success' }"/>	</firstStatus>	</ObjectListItem>	</List>	</content>	</Page>	</pages>	</App>	</Shell> </mvc:View>

```

在视图的控制器里实现这个搜索函数：

```JavaScript

sap.ui.define([	"sap/ui/core/mvc/Controller",	"sap/m/MessageBox" ], function (Controller, MessageBox) {	"use strict";	return Controller.extend("sapcp.cf.tutorial.app.controller.View1", {	onInit: function () {	},	// show in a pop-up which list element was pressed	handleListItemPress: function (oEvent) {	var oRouter = sap.ui.core.UIComponent.getRouterFor(this);	var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");	oRouter.navTo("Detail", {	productId: selectedProductId	});	}	}); });

```

测试：

搜索能够按照期望的工作：

关于SAP UI5应用里搜索功能的实现是怎样的问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。