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 !