SAPUI5 - Seach field on a table with column list items - search

Question

EDIT: Silly me, was pointing at the wrong property. Should have been pointing it at ArticleDescription instead of value.
I require a search field on a table with custom list items. The table brings through the data fine, but a requirement now is to add a search field for easy searching due to sometimes the table can get large.
Following the SAPUI5 explored page, I cannot seem to get this to work.
Ideally I would like it to use the liveChange property so this is done on the fly. I've got it to the point where that's doing it's job but I'm not ring back the search data.
Any help would be appreciated.
Table image
main.view.xml
<!-- Search box -->
<SearchField liveChange="onSearch" width="100%" class="sapUiMediumMarginBottom"/>
<!-- Table -->
<Table id="stock_table" itemPress="onOrderClicked" items="{stock>/Items}" keyboardMode="Edit" showFullScreenButton="true">
<infoToolbar>
<Toolbar>
<ToolbarSpacer/>
<Label text="{ path:'stock>/CurrentDate', formatter:'.tableHeader'}"/>
<ToolbarSpacer/>
</Toolbar>
</infoToolbar>
<columns>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>Article}"/>
</Column>
<Column minScreenWidth="Tablet" width="10em" demandPopin="true">
<Text text="{i18n>UnitOfMeasure}"/>
</Column>
<Column minScreenWidth="Tablet" width="8em" demandPopin="true">
<Text text="{i18n>Quantity}"/>
</Column>
</columns>
<items>
<ColumnListItem class="sapUiSizeCompact">
<customData>
<core:CustomData key="mydata" value="{stock>_errorStateClass}"
writeToDom="true"/>
</customData>
<HBox>
<core:Icon src="sap-icon://message-information"
tooltip="{i18n>ArticleNumber}: {stock>ArticleNumber}"
class="sapUiSmallMarginEnd greggslightblue"/>
<Text text="{stock>ArticleDescription}"/>
</HBox>
<Text text="{stock>UnitOfMeasureDescription}"/>
<HBox>
<Input id="quantity_input" valueLiveUpdate="true" value="{stock>_Quantity}"
liveChange="onQuantityAmountChanged"
class="CanHaveInteraction green_enter" width="5rem"/>
<core:Icon src="sap-icon://message-error"
tooltip="{stock>_ErrorMessage}"
class="sapUiSmallMarginEnd greggsred input-warning-icon"
visible="{stock>_ErrorStatus}" press="onErrorIconPressed"/>
<core:Icon src="sap-icon://message-warning"
tooltip="{stock>_ErrorMessage}"
class="sapUiSmallMarginEnd greggsred input-warning-icon"
visible="{stock>_WarningStatus}"/>
</HBox>
</ColumnListItem>
</items>
</Table>
main.controller.js
onSearch : function (oEvt) {
// add filter for search
var aFilters = [];
var sQuery = oEvt.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var filter = new Filter("Name", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
// update list binding
var list = this.getView().byId("stock_table");
var binding = list.getBinding("items");
binding.filter(aFilters, "Application");
}

Answer 1

are you sure the following line contains a valid search query:
var sQuery = oEvt.getSource().getValue();
As documented in the API https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.SearchField.html#event:liveChange you have to use the event source parameter 'newValue':
var sQuery = oEvt.getParameter("newValue");
Update
Please show your data structure as you try to filter on path 'Name'. But within the table column binding I cannot see any attribute called 'Name'. Rather you can try to filter on attribute 'ArticleDescription':
var filter = new Filter("ArticleDescription", sap.ui.model.FilterOperator.Contains, sQuery);