這節課我們將針對list增加一個篩選功能。
1.首先改造下InvoiceList.view.xml，加入id方便找到它以及標簽

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

2.修改InvoiceList.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/model/json/JSONModel","sap/ui/model/Filter","sap/ui/model/FilterOperator"
], (Controller, JSONModel, Filter, FilterOperator) => {"use strict";return Controller.extend("ui5.walkthrough.controller.InvoiceList", { onInit() {const oViewModel = new JSONModel({currency: "EUR"});this.getView().setModel(oViewModel, "view");},onFilterInvoices(oEvent) {// build filter arrayconst aFilter = [];const sQuery = oEvent.getParameter("query");if (sQuery) {aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));}// filter bindingconst oList = this.byId("invoiceList");const oBinding = oList.getBinding("items");oBinding.filter(aFilter);}});
});

我們看下這個方法onFilterInvoices：
var aFilter = []; 定義一個空數組，用來存放需要篩選的字段
var sQuery = oEvent.getParameter(“query”); 獲取用戶輸入，oEvent代表的就是當前控件的輸入
if (sQuery) {
aFilter.push(new Filter(“ProductName”, FilterOperator.Contains, sQuery));
} 如果輸入了字符，就將按照輸入的字符去匹配ProductName進行篩選，FilterOperator.Contains這個使篩選的規則，Contains是包含，不區分大小寫；同樣的類型還有EQ,BT,GT,GE等
Filter 這個類的構造方法：有四個參數[字段，表達式，值1，值2]

var oList = this.byId(“invoiceList”);這個是通過id獲取list
var oBinding = oList.getBinding(“items”); 獲取list綁定的內容
oBinding.filter(aFilter);調用篩選