Live Search Functionality In SAP UI5

[former_member1321]

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 pdominique 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 !

[former_member321811]

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

[former_member1321]

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

[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

 

[former_member1321]

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. 🙂

[Former Member]

Hello pdominique,

 

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?

[former_member321811]

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

[Former Member]

Hi pdominique ,

 

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)

[former_member321811]

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

[former_member687956]

Hi pdominique ,

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!");

			}

		}