Search Field From Table in sap ui5

View.xml



<core:View xmlns:core="sap.ui.core"
xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="showmessagetoast.SAPmsgToast"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>

<f:SimpleForm id="ADD" minWidth="1024"
maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
labelSpanL="4" labelSpanM="4" labelSpanS="4" emptySpanL="5"
emptySpanM="5" columnsL="2" columnsM="2" class="editableForm">


<Label text="Name" />
<Input id="namee" value="{Name}" />
<Label text="Category" />
<Input id="category" value="{Category}" />
<Label text="SupplierName" />
<Input id="SuppName" value="{SupplierName}" />
<Label text="Description" />
<Input id="Desc" value="{Description}" />
<Label text="CurrencyCode" />
<Input id="CurrCode" value="{CurrencyCode}" />
</f:SimpleForm>

<Toolbar >
<Label  id="getCount"/>
<SearchField liveChange="onSearch" width="40%" />
</Toolbar>

<Table id="idProductsTable" inset="false" items="{/ProductCollection}">
<columns>
<Column width="12em">
<Text text="Product" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Name}" text="{Category}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>

<OverflowToolbar>
<ToolbarSpacer />
<Button type="Accept" press="showme" text="Show" />
</OverflowToolbar>

</Page>
</core:View>




onSearch : function (oEvent) {

// add filter for search
var aFilters = [];
var sQuery = oEvent.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var filter = new sap.ui.model.Filter("Category", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}

// update list binding
var list = this.byId("idProductsTable");
var binding = list.getBinding("items");
binding.filter(aFilters, "Application");
var oTableItem = list.getItems();


// setting count value to label
var a = oTableItem.length;
var gettlabell = this.byId("getCount").setText(a);
//console.log(gettlabell);
//console.log(a);
//console.log(binding);
},

Post a Comment

Previous Post Next Post