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應用里搜索功能的實現是怎樣的問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。