Skip to Content
Author's profile photo Deepak Tewari

Live Search Functionality In SAP UI5

Nowadays we come across many web pages that provide data in the form of lists or tables. These lists are enabled with live search, i.e. as soon as the user types in the search box the results are shown to him on the spot. Like the below image:

I was always keen to bring this functionality to SAP UI5 apps containing lists or tables. I implemented this with a very simple technique.

I debugged the standard search function which is provided by SAP UI5 templates along with the search field and found out a way to implement live search in that. Standard search functionality:

View File: <SearchField width=”50%” search=”onFilter” selectOnFocus=”false”/>

(I tried to add a liveChange event to the SearchField Control but I dont know why it didn’t work.)

Controller File: 

onFilter: function(oEvent) {

			// build filter array
			var aFilter = [];
			var sQuery = oEvent.getParameter("query");
			if (sQuery) {
				aFilter.push(new Filter("ProductName", FilterOperator.Contains,sQuery));
			}
                        // filter binding
			var oList = this.getView().byId("itemList");
			var oBinding = oList.getBinding("items");
			oBinding.filter(aFilter);

I replaced the default SearchField Control with a Label and Input control as below:

View File: <Label text=”Search” design=”Bold”/><Label text=”Search” design=”Bold”/>    

                  <Input width=”auto” placeholder=”Type To Search” id=”input” liveChange=”onFilter1″/>

And I changed a bit of code of the default filter function:

Controller File: 

	onFilter1: function(oEvent) {

			// build filter array
			var aFilter = [];
			
			var sQuery = this.getView().byId("input").getValue();
			if (sQuery) {
				aFilter.push(new Filter("ProductName", FilterOperator.Contains,sQuery));
			}

			// filter binding
			var oList = this.getView().byId("itemList");
			var oBinding = oList.getBinding("items");
			oBinding.filter(aFilter);
		}

Note here that “itemList” and “items” are the IDs of the list and the items binding respectively.

 

Just this and the work is done. I know this is a very simple approach but it served the purpose. Below is the snapshot of its working:

 

I am now looking out ways to also colour (or bold) the matched items(or keywords) of the list. Like this:

I will share the same if I am able to achieve that 🙂 .

Edit: As described by Pierre  I achieved the above mentioned functionality with the help of the link :

https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.InputAssisted/preview

Snapshot of search suggestions:

Thank you Pierre for your help :).

Hope this is helpful !

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierre Dominique
      Pierre Dominique

      Hi,

      The functionality you are looking for already exists and it's called suggestions:  https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.InputAssisted/preview and https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.SearchFieldSuggestions/preview

      Cheers,

      Pierre

      Author's profile photo Deepak Tewari
      Deepak Tewari
      Blog Post Author

      Thank you Pierre for updating me on this 🙂 . I will  surely try using this within my apps.

      Author's profile photo Former Member
      Former Member

      Hello Pierre ,

       

      thanks for your helpful tips. Besides I have a question about the suggestions functionality. Is it possible that I could build this suggestions functionality into the search field of the value help dialog window?

      Author's profile photo Pierre Dominique
      Pierre Dominique

      Hi,

      As mentioned in my previous reply, suggestions are also available for the SearchField control so you can easily achieve this. Instead of using a SelectDialog, you can build your own with a SearchField and a Table.

      Cheers,

      Pierre

      Author's profile photo Former Member
      Former Member

      Hi Pierre  ,

       

      but in my case I don't know where to write the suggestion's codes. Because the pic. I have posted is a value-help-dialog-window, which can be opened by clicking the value-help-button in a input control (through the valueHelpRequest event of the input control). And I'm looking forward is, I want to have the suggestion's function in the search field of the value-help-dialog-window.  Do you have any ideas?

      Codes in my view:

      <Input id="oInput" type="Text" valueHelpRequest="onValueHelpRequest" showValueHelp="true" value="{Product}" suggestionItems="{/ProductCollection}" showSuggestion="true">  
        <suggestionItems>
          <core:Item text="{Product}" />
        </suggestionItems>
      </Input>

      Codes in my controller:

      onValueHelpRequest: function(oEvent) {
      
      this.handleValueHelpRequests(oEvent, "/ProductCollection", "Products", "{ProductID}", "{Product}", "ProductNameFormI18n");
      
      }

       

       ---->   (the same pic. from my last post: value-help-dialog-window)

      Author's profile photo Pierre Dominique
      Pierre Dominique

      You have to create you own Dialog with a SearchField and List instead of using the built-in value help dialog. Here's a sample: https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.Dialog/preview

      Pierre

      Author's profile photo Dravin Sengupta
      Dravin Sengupta

      Hi Pierre  ,

      I’m trying to create a search field enabled with suggestion to filter a particular item from the list . I’m using standard Search Field. I’m searching for the name of the employee. The issue is that in my model, I’ve saved the Employee name as first name and last name. While using the suggestion box, I wan to show the full name. But when I use the filter for the same, I couldn’t put both fields together making the full name. Can you help me out?

      
      //In xml view:
      <SearchField 
      								id="searchResource"
      								placeholder="Search Resource"
      								enableSuggestions="true"
      								search=".onSearch"
      								suggest=".onSuggest"
      								class="searchBoxClass"
      								width="auto"
      								suggestionItems="{
      								path: 'oDataGlobal>/resourceListData',
      								sorter: { path: 'firstName' }
      								}">
      								<SuggestionItem text="{oDataGlobal>firstName} {oDataGlobal>lastName}" description="{path:'designationId'} {path:'pSkills'}" key="{oDataGlobal>resourceId}" />
      							</SearchField>
      
      
      //in js controller
      onSuggest: function(oEvent) {
      			var sValue = oEvent.getParameter("suggestValue"),
      				aFilter= [];
      			if(sValue) {
      				aFilter = [
      					new Filter([
      						new Filter("resourceId", function(sText) {
      							return (sText || "").toUpperCase().indexOf(sValue.toUpperCase()) > -1;
      						}),
      						new Filter("firstName", function (sDes) {
      							return (sDes || "").toUpperCase().indexOf(sValue.toUpperCase()) > -1;
      						})
      						],false)
      					];
      				
      			}
      			this.oSearchField.getBinding("suggestionItems").filter(aFilter);
      			this.oSearchField.suggest();
      		},
      		onSearch: function (event) {
      			debugger;
      			var sQuery = event.getParameter("query");
      			
      			var aFilter = [];
      			if (sQuery) {
      				
      				aFilter.push(new Filter("firstName", FilterOperator.Contains,sQuery));
      			
      				
      				var oList = this.getView().byId("resourceListId");
      				var oBinding = oList.getBinding("items");
      				oBinding.filter(aFilter);
      			} else {
      				sap.m.MessageToast.show("Search is fired!");
      			}
      		}
      Author's profile photo Michael Graf
      Michael Graf

      Hi Deepak,

      nice idea to implement a google-like search, it certainly can be done very flexibly with an sap.m.Input control.

      But the sap.m.SearchField offers the same functionality out of the box, and you don’t even need the liveChange event to make it work ? Check this example to see it in action:

      https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.SearchFieldSuggestions/preview

      PS: Note that liveChange parameter for the SearchField is different to the search event (query vs newValue) – that is probably why your first try did not work

      Have fun,

      Michael

       

      Author's profile photo Deepak Tewari
      Deepak Tewari
      Blog Post Author

      Thanks for your update Michael.

      Yes you are right, I first tried to achieve the same with the help of standard SearchField control as it also had a liveChange event. But somehow, that event didn't fired and I came up with this work-around.

      I will definitely try that out and will try to update the document mentioning the same. 🙂