Skip to Content
Author's profile photo Sai Vellanki

Input: How to highlight suggestion items

Hello All,

Input control is where the user can enter data. It has some good built-in features like setting the type, suggestion items pop-up, value help dialog etc.

I remember there was a question on SCN few months back about how to highlight input suggestion items. I had provided a solution for it, but that seems to fail during string comparison and also finding list pop-up id dynamically.


So, I have to re-built the code to overcome above issues.

My JSON Model would be:


          var aData = [{
            "ProductId": "1239102",
            "Name": "Power Projector 4713",
            "Category": "Projector"
          }, {
            "ProductId": "2212-121-828",
            "Name": "Power Tag",
            "Category": "Graphics Card"
          }, {
            "ProductId": "K47322.1",
            "Name": "Webcam Smaill",
            "Category": "Graphics Card"
          }, {
            "ProductId": "22134T",
            "Name": "Webcam",
            "Category": "Accessory"
          }, {
            "ProductId": "P1239823",
            "Name": "Monitor Locking Cable",
            "Category": "Accessory"
          }, {
            "ProductId": "214-121-828",
            "Name": "Laptop Case",
            "Category": "Accessory"
          }, {
            "ProductId": "215-121-828",
            "Name": "Laptop Small",
            "Category": "Accessory"
          }, {
            "ProductId": "XKP-312548",
            "Name": "USB Stick 16 GByte",
            "Category": "Accessory"
          }, {
            "ProductId": "KTZ-12012.V2",
            "Name": "Deskjet Super Highspeed",
            "Category": "Printer"
          }, {
            "ProductId": "KTZ-12012.V2",
            "Name": "Deskjet Super1",
            "Category": "Printer"
          }, {
            "ProductId": "KTZ-12012.V2",
            "Name": "Deskjet Super2",
            "Category": "Printer"
          }];


And the XML view code:


<mvc:View height="100%"
    controllerName="demo.InputPage"
    xmlns:l="sap.ui.layout"
    xmlns:model="sap.ui.model"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
      <Input id="oInput"
          showSuggestion="true"
          showValueHelp="false"
          suggest="onSuggest"
          suggestionItems="{
                            path: '/'
                            }">
        <core:Item text="{Name}" key="{ProductId}" />
      </Input>
</mvc:View>


Now according to my JSON Model, when user types in the name, input suggestion would pop-up highlighting the characters that are typed.

To do that, I hear the suggest event of Input, where I can fetch the value that is entered and compare it with value that is shown on pop-up.

Here is the code, which does highlighting:


onSuggest: function(oEvent) {
    var oValue = oEvent.getParameter("suggestValue");
    var that = this;
    jQuery.sap.delayedCall(100, null, function() {
        that.highlight(oValue);
    });
},
highlight: function(text) {
    var oInput = this.getView().byId("oInput");
    var oList = oInput._oList;  //Get Input List popup
    var inputText = oList.$().find('.sapMSLITitleOnly');  //Find the title that needs to be highlighted
    var oItems = oList.getItems();
    $.each(inputText, function(i, value) {
       var innerHTML = inputText[i].textContent;   //Get the title content
       var oTitle = oItems[i].getTitle();    //Get Items title
       var index = innerHTML.indexOf(oTitle);    //Compare and find the title index
        if (index >= 0) {
          innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
          inputText[i].innerHTML = innerHTML;
    }
});
}


Interesting part was getting the index when we compare it with a string with case-sensitive.

Consider my first value in model, which is ‘Power Projector 4713’, when user types ‘P’ which is in caps, it works fine. If user types ‘p’ which is in small case then it doesn’t find the index and returns ‘-1’.

To overcome above issue, I fetch list pop-up aggregation ‘items’ where I get the normal text using item getTitle() method and compare it with Input pop-up item title. Now it gives me the index where I can successfully highlight the pop-up text.

‘Highlight’ style class has been used for highlighting text:


    .highlight {
      background-color: #ffff66;
    }

Working demo of Highlight Input Suggestion Items: Plunker – Input Suggestion Items (Highlight)

Working Snip:

Capture.gif

Thanks for reading my blog, have a nice day!


Edit on 17th June, 2016:


Now we can highlight items ‘WITHIN’ the text: Plunker

Working Snip:

Capture.gif

Regards,

Sai Vellanki.

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Christopher Solomon
      Christopher Solomon

      Very nice! I remember that old thread and your response too. I guess your brain wanted to keep working on it. haha

      It would be nice if matching on letters WITHIN the option and not just going off the first letter and onward.

      So that if I type "cab"....the suggestion "Monitor Cable" would come up. But of course....an artist must stop working on their painting at some point and move on to the next.

      Author's profile photo Sai Vellanki
      Sai Vellanki
      Blog Post Author

      He he 😛

      And yeah good point about 'WITHIN' option. May be I will have to extend the Input control where I should change the 'filter' type from 'StartsWith' to 'Contains'. I will check this one! 😉

      Thank you Chris.

      Author's profile photo Sai Vellanki
      Sai Vellanki
      Blog Post Author

      Christopher Solomon,

      Now we can highlight items 'WITHIN' text as well: Plunker 🙂

      Thank you once again for driving me to this.

      Author's profile photo Christopher Solomon
      Christopher Solomon

      AWESOME MAN!!!! Stoked you did it! Very cool when you type T-O and see what all comes up now!

      Author's profile photo Maksim Rashchynski
      Maksim Rashchynski
      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Good one Sai.

      This is actually an out of the box feature in Ui5 v1.36

      sap.m.SearchField: This control now has a new suggestions feature. When a user enters something in the search field, the application can now display a list of suggestions.