Skip to Content

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 !

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

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

    (0) 
    1. Vincent Lee

      Hello Pierre DOMINIQUE,

       

      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?

      (0) 
      1. 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

        (0) 
        1. Vincent Lee

          Hi Pierre DOMINIQUE ,

           

          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)

          (0) 
  2. 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

     

    (2) 
    1. Deepak Tewari 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. 🙂

      (0) 

Leave a Reply