Check table row based on value of input search SAP

Question

I have a table (multiselect mode) with a search field. Is there a way that when I search, the value of the search result will automatically check the corresponding row in the table. Initially I though I could just search and then if the result length is 1, do a getItems() on the table and setSelected = true on the first row. The row gets selected, but when I exit the searching, it the row get deselected.

        var oSerialTable = new sap.m.Table({
            mode: sap.m.ListMode.MultiSelect,
            columns: [
                ...
            ],
            items : {
                    path : "/results",
                    template: new sap.m.ColumnListItem({
                        cells: [
                        new sap.m.Text({ text: "{Sernr}" }),
                        new sap.m.Text({ text: "{Equnr}" }),
                        new sap.m.Text({ text: "{Lbbsa}" })
                        ]
                      })
            },
            select : function(evt){

            },
            updateFinished: function(){
                var aItems = oTable.getItems(); 
                console.log(aItems);
                if (aItems.length == 1){
                console.log(aItems[0]);
                aItems[0].setSelected(true)
                }

            }
        });

        oSerialTable.setModel(ocheckSerialBatchJsonModel);


        var oSerialTableSearch = new sap.m.SearchField({

            search: function(oEvent){

            var filterValue = oEvent.getSource().getValue();
            var aFilter = new sap.ui.model.Filter("Sernr", sap.ui.model.FilterOperator.EQ, filterValue);
            var oItemTemplate = new sap.m.ColumnListItem({
                cells: [
                    new sap.m.Text({ text: "{Sernr}" }),
                        new sap.m.Text({ text: "{Equnr}" }),
                        new sap.m.Text({ text: "{Lbbsa}" })


                ]
            });

                oSerialTableSearch.bindItems({path:"/SerialSet", template:oItemTemplate, filters: [aFilter]});


            }

        });

Answer 1

This gets much easier if you bind the selected property of the ColumnListItem to your model. You can then perform the filtering and selection on your model data:

    ...      
                 template: new sap.m.ColumnListItem({
                    cells: [
                    new sap.m.Text({ text: "{Sernr}" }),
                    new sap.m.Text({ text: "{Equnr}" }),
                    new sap.m.Text({ text: "{Lbbsa}" })
                    ],
                    selected: "{selected}" //Bind selection to model
                  })

    ...

    var oSerialTableSearch = new sap.m.SearchField({
       search: function(oEvent){
           var filterValue = oEvent.getSource().getValue();
           var array = ocheckSerialBatchJsonModel.getProperty("/results");
           array.forEach(function(item){
              //update selected state of each item
              item.selected = (item.Sernr == filterValue || item.Equnr == filterValue || item. Lbbsa === filterValue);
           });
           ocheckSerialBatchJsonModel.setProperty("/results",array); //Write back to Model to update bindings
        }
    });

Example with your code on JSBin.