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:
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:
Regards,
Sai Vellanki.
- SAP Managed Tags:
6 Comments
