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
Thank you
Very helpful thanks for sharing..
Hi Krishnakant,
I am trying to enhance the standard fiori CRM app "My Accounts" . I need to do the Search help functionality for input fields. I followed your approach its working fine upto 'F4 help' and 'Search'
Now my problem is once the value selected from F4 help its working fine , again I need to click on F4 only the selected value was displayed, Instead of that I need to get all values. How can I handle that. please suggest me. Could you please find the below screen snap for your reference.
Thanks&Regards
Sai Sravya
Dear your Live search functionality not working , I have copy the same .
Could you please tell me what more required .