Auto complete change to bold

[Former Member]

I use the following control and I wonder if there is a way that if user for example type aaa and this is

part of the auto complete put this aaa in bold

e.g.

user have this option

aaa/bb/ccc

and the user type aaa so he get  aaa/bb/ccc

if he type cc you get aaa/bb/ccc

is it possible?

AutoComplete - SAPUI5 Demo Kit

Title Typo edited by: Michael Appleby

[Former Member · Accepted solution]

Hi Stephane,

First know the id of the listBox of autocomplete by doing inspect element(right click on the listbox of the autocomplete and click inspect element). And then try with the following code: that is by using liveChange event

createContent : function(oController) {



  //Initialize a JSON Model

  var oModel2 = new sap.ui.model.json.JSONModel();
  oModel2.setData(aData);
  //Create a AutoComplete control and bind the items aggregation
  var oAuto2 = new sap.ui.commons.AutoComplete("auto1",{
  tooltip: "Enter a name",


  maxPopupItems: 5,
  displaySecondaryValues: true,

  items: {
  path: "/",
  template: new sap.ui.core.ListItem({text: "{name}", additionalText: "{userid}"})

  },
  liveChange: function()
  {
  document.getElementById("auto1-lb-list").style.fontWeight = "bold";

 });

  oAuto2.setModel(oModel2);
  //attach it to some element in the page
  oAuto2.placeAt("content");
  }


});

Hope this helps

Regards,

Lahari

[Former Member · Accepted solution]

HI Lari,

Thanks for support!

I try what you tell and currenlty nothing happen I provide the id for the list box....

can you provide some working example with jsbin or something?

Thanks in advance!

Stephane

[Qualiture · Accepted solution]

I don't think this will work... it will at most render the dropdown in bold font.

As I understand it, you want something like this: If typed in 'lor', you want the dropdown to look like:

Lorem ipsum

Lloret de mar

Lore

Lost in space

(added color for highlighting)

I don't think you can solve this with simply adding a style, you need to completely rewrite how the dropdown is rendered.

And since the AutoComplete is extended from a DropdownBox which uses a ListBox to show the autocomplete values, you have a few controls to extend...

In the end, I think you should do your css jiggerypokery in the (extended) ListBox control method 'onAfterRendering', that's where currently the various <li> objects are created

Not sure if this extra styling is worth all the extra effort though

[Former Member · Accepted solution]

Thanks Robin,

Correct this is what I want....or to be more precise need to do.

It seems that its very difficult to find examples for such a thing in the net for UI5 control.

If you can provide some example link hint it will be very helpful...

Thanks in advance!

Stephane

[former_member182372 · Accepted solution]

Gosh....thats why i LOVE SAPUI5

http://jsbin.com/dihozenoka/2/edit?html,output

  oAuto1.setFilterFunction(function(sValue, oItem){
  return oItem.getText().indexOf(sValue) != -1;
  });

      oAuto1._getListBox().addDelegate(
      {
            onAfterRendering: function (oEvent)
            {
              $("#" + oAuto1._getListBox().getId() + " .sapUiLbxITxt").each(function( index, element ) {
element.innerHTML = element.innerHTML.replace(oAuto1._sTypedChars, "<b>" + oAuto1._sTypedChars + "</b>");
              });
            }
      });

[Former Member · Accepted solution]

Hi Maksim,

          The code is great!!!,Could u please explain how exactly you did it.

Thanks & Regards,

Lahari

[Qualiture · Accepted solution]

This is actually pretty neat! Never occurred to me to add a delegate, this is clean!

[Former Member · Accepted solution]

Hi Maxim

Its working great expect of one thing, you cannot search for the secondery value.

any idea what is wrong? I guess its related to the following code but I dont have any idea how to solve it...

for example if you try to search for u01 you dont get anything...

oAcFilePath.setFilterFunction(function(sValue, oItem) {

  return oItem.getText().indexOf(sValue) != -1;

  });

Thanks in advance!

Stephane

[former_member182372 · Accepted solution]

SAP finally gave us bazooka instead of slingshot (WDA, WDJ)

[Former Member · Accepted solution]

HI Maxim,

Is it possible to use also the secondary value to the search,

currently its not working.

Do I need to open new topic on this issue?

Regards,

Stephane

[former_member182372 · Accepted solution]

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;alternate&quot; type=&q...

[former_member189842 · Accepted solution]

Hi Singler,

its not that line, U need to add the userid also to the autocomplete. Here is the code.

for(var i=0; i<aData.length; i++){

      oAuto1.addItem(new sap.ui.core.ListItem({text: aData[i].name +" - " +aData[i].userid}));

}

Also for case sensitive to work, replace the following things.

oAuto1.setFilterFunction(function(sValue, oItem){

      return oItem.getText().search(new RegExp(sValue, "gi")) != -1;

      });

            oAuto1._getListBox().addDelegate(

            {

                  onAfterRendering: function (oEvent)

                  {

                    $("#" + oAuto1._getListBox().getId() + " .sapUiLbxITxt").each(function( index, element ) {

                    element.innerHTML = element.innerHTML.replace(new RegExp(oAuto1._sTypedChars, "gi"), "<b>" + oAuto1._sTypedChars + "</b>");

                    });

                  }

            });

[Former Member · Accepted solution]

Thanks Maxim

Awesome!!!

Best Regards,

Stephane

[Former Member · Accepted solution]

HI Bhaskar,

Can you please provide snipping jsbin or something?

Thanks,

Stephane

[former_member189842 · Accepted solution]

This is more cleaner than the one I provided. Thanks Maksim. I can understand the whole code now but I have two questions regarding how you were able to write this solution?

1) How did you get this id  .sapUiLbxITxt. I can search it in the inspect element but I cant actually focus on it when the cursor is in the autocomplete box.  none of the toggle element states (hover, active, focus etc) or not working.

2) is there any documentation to the addDelegate() method.

on a side note, I thought for people working in WDA and WDJ it would take forever to master  UI5, But people like you picked it up pretty quickly. amazing.

thanks in advance.

Bhaskar

[former_member182372 · Accepted solution]

1) right click->Inspect element, no rocket science

2) I found a lot of practical addDelegate in HR Renewal

exlporing sources (local or in dev tools) gives a pretty good understanding

and well, practice, 3 custom apps, 3 HR renewal implementation, 1 SRM ui addon implementation, 4 fiori implemetations - that gives you an idea

Just revisited, doesn't sound like bragging LOL ?? i didnt intend Message was edited by: Maksim Rashchynski

[former_member189842 · Accepted solution]

this is the final JsBin with case insensitive highlighting.

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;alternate&quot; type=&q...

[former_member182372]

you would need to extend sap.ui.commons.ListBox

no such functionality out of the box

[Former Member]

Hi Maxim

Can you provide example on how to do that ?

Regards,

Stephane

[Qualiture]

Use jQuery css manipulation in your custom control