JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("learning");
var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
JavaScript
var data = [
{ReleaseDate : "SCN1", Description : "SAP1"},
{ReleaseDate : "SCN2", Description : "SAP2"},
{ReleaseDate : "SCN3", Description : "SAP3"}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
sap.ui.getCore().setModel(oModel);
var oBar = new sap.m.Bar({
contentLeft:[
new sap.m.SearchField({
search:function(event){
var filters = [];
var query = event.getParameter("query");
if (query && query.length > 0) {
var filter = new sap.ui.model.Filter("ReleaseDate", sap.ui.model.FilterOperator.Contains, query);
filters.push(filter);
}
var ovarlist = this.getView().byId("list");
console.log(ovarlist);
var binding = list.getBinding("items");
binding.filter(filters);
}
}),
]
});
var oTemplate = new sap.m.ObjectListItem({
title:"{ReleaseDate}",
});
var oList = new sap.m.List({
select:function(event){
}
});
oList.bindAggregation("items","/",oTemplate);
var oBar1 = new sap.m.Bar({
contentLeft:[
new sap.m.SearchField({
search:function(event){
var filters = [];
var query = event.getParameter("query");
if (query && query.length > 0) {
var filter = new sap.ui.model.Filter("Description", sap.ui.model.FilterOperator.Contains, query);
filters.push(filter);
}
var list = this.getView().byId("list");
console.log(list);
var binding = list.getBinding("items");
binding.filter(filters);
}
})
]
});
var oTemplate1 = new...