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.

To report this post you need to login first.

6 Comments

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

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

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

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

    (0) 

Leave a Reply