Oracle ADF – hide search icon from af:inputListOfValues or true autocomplete

 

The example bellow shows how to hide the search icon “search glass” from adf inputListOfValues component so it will look like regular auto complete field that we see all over the Web

The example was developed on 11g R2 Jdeveloper.

This is the result

 

Doing this is extremely easy. Actually what you see is just a VO that I dropped on the page as a Form. “Item” has LOV defined in the “model”.

So when I dropped the VO on the page, the LOV was automatically created for me .

I used “suggestedItems” to create auto complete list as described here.

How all I have to do is to remove the “search” icon. For this I created a CSS style class and put it into application CSS file. How to create a CSS file for ADF application can be see in this grate post

Here is the Style Class

.TagSearchIconHidden af|inputListOfValues::search-icon-style

{

display: none;

}

And here is the usage of this class in “StyleClass” property for “Item” field