Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member9607
Active Participant

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

4 Comments
Labels in this area