Thursday, 9 January 2014

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



No comments:

Post a Comment