第24步:过滤

实现动态搜索过滤：SAP UI5 中的搜索字段应用

最新推荐文章于 2025-10-10 21:10:48 发布

翻译最新推荐文章于 2025-10-10 21:10:48 发布 · 217 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://sapui5.hana.ondemand.com/#/topic/5295470d7eee46c1898ee46c1b9ad763

SAPUI5 专栏收录该内容

40 篇文章

订阅专栏

在这个步骤中，我们介绍了如何在SAP UI5产品列表中添加搜索功能，使列表根据用户输入的搜索词实时更新。通过在`InvoiceList.view.xml`中插入搜索字段并定义过滤器，以及在`InvoiceList.controller.js`中处理搜索事件，实现了列表的动态过滤。搜索字段与列表绑定相结合，确保只有匹配搜索条件的项目显示。这个功能增强了用户体验，使得数据查找更加高效。

说明

在这一步中，我们为产品列表添加一个搜索字段，并定义一个表示搜索词的过滤器。在搜索时，列表会自动更新，只显示与搜索词匹配的项。

预览

在这里插入图片描述

在列表上方显示一个搜索字段

代码

你可以在演练-第24步查看和下载所有文件。

webapp/view/InvoiceList.view.xml
在这里插入图片描述

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      id="invoiceList"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}" >
      <headerToolbar>
         <Toolbar>
            <Title text="{i18n>invoiceListTitle}"/>
            <ToolbarSpacer/>
            <SearchField width="50%" search=".onFilterInvoices"/>
         </Toolbar>
      </headerToolbar>
      <items>
         <ObjectListItem>
		…
         </ObjectListItem/>
      </items>
   </List>
</mvc:View>

该视图通过一个搜索控件进行扩展，我们将其添加到发票列表中。我们还需要为列表控件指定一个ID invoiceList ，以便能够从添加到搜索字段的事件处理程序函数onFilterInvoices 中识别列表。此外，搜索字段是列表头的一部分，因此，列表绑定上的每个更改都将触发整个列表(包括搜索字段)的重新呈现。

headerToolbar聚合替换了我们之前在列表头中使用的简单标题属性。工具栏控件更加灵活，可以根据您的喜好进行调整。我们现在在左侧显示标题，并在右侧显示sap.m.Title控件、间隔符和sap.m.SearchField。

webapp/controller/InvoiceList.controller.js
在这里插入图片描述

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"../model/formatter",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
	"use strict";
	return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
		formatter: formatter, 
		onInit : function () {
			var oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel, "view");
		},
		onFilterInvoices : function (oEvent) {

			// build filter array
			var aFilter = [];
			var sQuery = oEvent.getParameter("query");
			if (sQuery) {
				aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));
			}

			// filter binding
			var oList = this.byId("invoiceList");
			var oBinding = oList.getBinding("items");
			oBinding.filter(aFilter);
		}
	});
});

我们为过滤加载了两个新的依赖项。filter对象将保存筛选操作的配置，而FilterOperator是指定筛选器所需的辅助类型。

在onFilterInvoices 函数中，我们根据用户在搜索字段中输入的搜索字符串构造了一个筛选器对象。事件处理程序总是接收一个事件参数，该参数可用于访问事件提供的参数。在我们的例子中，搜索字段定义了一个参数查询，我们通过在oEvent参数上调用getParameter(" query ")来访问它。

如果查询不为空，则向仍然为空的筛选器数组添加一个新的筛选器对象。但是，如果查询为空，则使用空数组过滤绑定。这确保我们再次看到所有列表元素。如果要搜索多个数据字段，还可以向数组添加更多过滤器。在我们的示例中，我们只在ProductName路径中进行搜索，并指定一个将提供给查询字符串的筛选操作符。

列表是通过我们在视图中指定的ID访问的，因为控件会自动加上视图ID前缀，所以我们需要通过辅助函数 byId 向视图请求控件。在列表控件上，我们访问聚合items的绑定，以使用新构造的筛选器对象对其进行筛选。这将根据搜索字符串自动筛选列表，以便在触发搜索时只显示匹配项。过滤操作符 FilterOperator.Contains 不区分大小写。

章节