Filtering a list SAPUI5

Question

i'm triying to filte my list using my input but is not working and i don't know why . The point is when someone write Example Confections an click the button a function it is trigger and filter my list with the value of the input The code i've been writing is this :

    <App>
        <pages>
            <Page>
                        <tnt:ToolHeader>
                            <Button icon="sap-icon://home" />
                            <Image src="{i18n>logo}"
                                    densityAware="false"
                                    width="{i18n>sizeImg}" />
                            <ToolbarSpacer />
                            <Text text="" wrapping="false">
                                <layoutData>
                                    <OverflowToolbarLayoutData priority="Disappear" />
                                </layoutData>
                            </Text>
                            <ToolbarSpacer />
                            <Button icon="sap-icon://synchronize" />
                            <Button icon="sap-icon://action-settings" />
                        </tnt:ToolHeader>

                    <Toolbar>
                        <Button icon="sap-icon://nav-back" />
                        <Title level="H3" text="Gestion de Clientes" />
                        <ToolbarSpacer />
                    </Toolbar>

                    <SplitContainer id="SplitContDemo" initialDetail="detail" initialMaster="master">
                    <detailPages>
                        <Page id="detail" title="Detalles de la busqueda" class="sapUiStdPage">
                            <content>
                                <Text text="" id="valor"/>
                                <List
                                    id="results"
                                    width="auto"
                                    items="{
                                        path : 'invoice>/Categories',
                                        sorter : {
                                            path : 'CategoryName'
                                        }
                                    }">
                                    <items>
                                        <ObjectListItem
                                            title="{invoice>CategoryName}">
                                            <firstStatus>
                                                <ObjectStatus text="{invoice>Description}"/>
                                            </firstStatus>
                                        </ObjectListItem>
                                    </items>    
                                </List>
                            </content>
                        </Page>
                    </detailPages>



                    <masterPages>
                        <Page id="master" icon="sap-icon://action" class="sapUiStdPage">
                            <content>
                                <f:SimpleForm id="SimpleFormChange354"
                                    editable="true"
                                    layout="ResponsiveGridLayout"
                                    labelSpanXL="3"
                                    labelSpanL="3"
                                    labelSpanM="3"
                                    labelSpanS="12"
                                    adjustLabelSpan="false"
                                    emptySpanXL="4"
                                    emptySpanL="4"
                                    emptySpanM="4"
                                    emptySpanS="0"
                                    columnsXL="1"
                                    columnsL="1"
                                    columnsM="1"
                                    singleContainerFullSize="false" >
                                    <f:content>
                                        <Label text="Categoría" />
                                        <Input id="cat" value="" tooltip="Ejemplo: 11111 , 22222 , A4333"/>
                                        <Toolbar>
                                        <ToolbarSpacer/>
                                            <Button icon="sap-icon://search" type="Default" press="onSearch"/>
                                        </Toolbar>
                                    </f:content>
                                </f:SimpleForm>
                            </content>
                        </Page>
                    </masterPages>
                </SplitContainer>
            </Page>
        </pages>
    </App>

and my controller is:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], function(Controller, Filter, FilterOperator) {
    "use strict";

    return Controller.extend("ActivitiesActivities.controller.Main", {
        onSearch : function(oEvent) {
            // build filter array
            var aFilter = [];
            // fetch event parameter
            var sQuery = oEvent.getParameter("query");
            // retrieve list control
            var oList = this.getView().byId("results");
            // get binding for aggregation 'items'
            var oBinding = oList.getBinding("items");

            if (sQuery) {
                aFilter.push(new Filter("CategoryName", FilterOperator.Contains, sQuery));
            }
            // apply filter. an empty filter array will show all items
            oBinding.filter(aFilter);
        }
    });
});

Answer 1

Rather than doing

var sQuery = oEvent.getParameter("query");

you need to do something like

var sQuery = this.byId('cat').getValue();

The reason being that you want to get whatever is typed into the Input box, oEvent in this scenario is simply the action of the button click so you don't have a parameter called query.

If you would prefer not to use a button you can set the submit event on the input and then access the value using this code.

<Input id="cat" value="" tooltip="Ejemplo: 11111 , 22222 , A4333" submit="onSearch"/>

var sQuery = oEvent.getParameter('value')