SAP前端路--使用ComboBox组件实现一个选择过滤下拉列表

App.view.xml

<mvc:View
	height="100%"
 	controllerName="sap.ui.demo.walkthrough.controller.App"
 	xmlns="sap.m"
	xmlns:core="sap.ui.core"
 	xmlns:mvc="sap.ui.core.mvc">
			<ComboBox
				id="selectItem"
				change="consoleData"
				items="{
					path: 'billDetails>/billDetail',
					sorter: {path: 'belong'}
				}"
				value="{/value}"
				>
				<core:ListItem key="{billDetails>value}" text="{billDetails>name}"/>
				<!-- <core:Item key="{value}" text="{name}"></core:Item> -->
			</ComboBox>
 </mvc:View>

change 选择项改变后调用的函数 

App.controller.js

sap.ui.define([
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
],function(JSONModel,Controller,MessageToast){
	"use strict";
	return Controller.extend("sap.ui.demo.walkthrough.controller.App",{
		onInit: function(){
            var billDetail = [{
						name: '基本',
						belong: '1',
						value: '￥2300.00',
						status: true
					},{
						name: '绩效',
						belong: '1',
						value: '￥6000.00',
						status: true
					},
					{
						name: '奖金',
						belong: '3',
						value: '￥2000.00',
						status: true
					},
					{
						name: '社保',
						belong: '4',
						value: '￥1500.00',
						status: false
					},
					{
						name: '考勤',
						belong: '4',
						value: '￥300.00',
						status: false
					},
					{
						name: '专项',
						belong: '5',
						value: '￥2000.00',
						status: false
					},
					{
						name: '预扣',
						belong: '5',
						value: '￥2200.00',
						status: true
					},
					{
						name: '预扣率',
						belong: '5',
						value: '3%',
						status: true
					}]
				var list = {
					"billDetail": billDetail
				}
				this.getView().setModel(new JSONModel(list), "billDetails");
				var value = {
					"value": ''
				}
				this.getView().setModel(new JSONModel(value));
				this.getView().byId("selectItem").setFilterFunction(function(sTerm, oItem) {
				console.log(oItem.getText().match(new RegExp(sTerm, "i")) || oItem.getKey().match(new RegExp(sTerm, "i")))
				return oItem.getText().match(new RegExp(sTerm, "i")) || oItem.getKey().match(new RegExp(sTerm, "i"));
			});
		},
		consoleData: function(){
			var category = this.byId('selectItem');
			console.log(category.mProperties);
			console.log(this.getView().getModel().oData);
		}
	})
})

结果

其实如果我们在选中某一项的时候，该项不包含多个键值对 比如 name、age。。。我们可以绑定value 即可

ComboBox还支持下拉表 显示双项，并且双项搜索 参见官网https://sapui5.hana.ondemand.com/#/api/sap.m.ComboBox/constructor