Live Search and Value Help Request

This document will show the code for Live Search and Value Help Request input types.

I have used the microsoft’s Northwind Odata service for demo application.

1. Live Search

Code :

  var serviceUrl;
  var search = new sap.m.Input("searchInput", {
  placeholder : "Search",
  type: sap.m.InputType.Text,
  showSuggestion:true,
  liveChange : function() {
  if (this.getValue().length > 0) {
  var oModel = new sap.ui.model.json.JSONModel();
  serviceUrl = "http://services.odata.org/Northwind/Northwind.svc/Customers/?$filter=startswith(ContactName,%27an%27)";
  oModel.loadData(serviceUrl,null, false, "GET",false, false, null);
  this.setModel(oModel);
  this.bindAggregation("suggestionItems", "/value", new sap.ui.core.Item({text: "{ContactName}"}));
  }
  }});

Output:

2. Value Help Request

Code

var vbox = new sap.m.VBox({
                  items : [
                    new sap.m.Label({
                      text: 'CategoryName'
                    }),
                    // Create the input field, binding the suggested items to the
                    // product objects in the data model
                    new sap.m.Input("input_assisted1", {
                      type: sap.m.InputType.Text,
                      placeholder: 'Enter Product ...',
                      showSuggestion: true,
                      suggestionItems: {
                        path: "/value",
                        template: new sap.ui.core.Item({
                          text: "{CategoryName}"
                        })
                      },
                      showValueHelp: true,
                      valueHelpRequest: function (oEvent) {
                       
                          var model = new sap.ui.model.json.JSONModel();
                          newurl = "http://services.odata.org/Northwind/Northwind.svc/Categories/?$filter=startswith(CategoryName,%27"+sap.ui.getCore().byId("input_assisted1").getValue()+"%27)";
                          model.loadData(newurl,null, false, "GET",false, false, null);
                            // Handling of both confirm and cancel; clear the filter
                        handleClose = function (oEvent) {
                          var oSelectedItem = oEvent.getParameter("selectedItem");
                          if (oSelectedItem) {
                            sap.ui.getCore().byId("input_assisted1").setValue(oSelectedItem.getTitle());
                          }
                          oEvent.getSource().getBinding("items").filter([]);
                        };
                        // Create a SelectDialog and display it; bind to the same
                        // model as for the suggested items
                        if (!this._valueHelpSelectDialog) {
                                               this._valueHelpSelectDialog = new sap.m.SelectDialog("valueHelpSelectDialog", {
                            title: "Categories",
                            items: {
                              path: "/value",
                              template: new sap.m.StandardListItem({
                                title: "{CategoryName}",
                                active: true
                              })
                            },
                            search: function (oEvent) {
                              var sValue = oEvent.getParameter("value");
                              var oFilter = new sap.ui.model.Filter(
                                "CategoryName",
                                sap.ui.model.FilterOperator.Contains, sValue
                              );
                              oEvent.getSource().getBinding("items").filter([oFilter]);
                            },
                            confirm: handleClose,
                            cancel: handleClose
                          });
                                              
                          this._valueHelpSelectDialog.setModel(model);
                        
                        }
                        else
                            { this._valueHelpSelectDialog.setModel(model);
                              }
                        this._valueHelpSelectDialog.open();
                     
                      }
                    })
                  ]
                });

Output:

Happy Learning