How can I customize the filter function for SelectOneMenu

Question

I tried to find on Primefaces Documentation but I have not found how can I customize the filter function for SelectOneMenu.

I add filterMatchMode="custom" filterFunction="#{mainRandevuBean.ilFilter()}"

But I don't know how can I write bean filterFunction.

Answer 1

The filter is a javascript (client-side) function. It all IS in the PrimeFaces documentation, which you should always look into first, carefully, thouroughly.

So use filterFunction="myFilter"

and create a javascript function like

function myFilter(itemLabel, filterValue) {
     // return true if this label matches, false otherwise
}

Answer 2

Just as a sidenote: primefaces documentation doesn't say anything semantically about the parameters. It also does not mention where the label comes from (in fact, the docs mention "the item value" which is not very clear).

In fact I used the JavaScript function to debug this in order to figure out what was provided by default as a label.

function filterList(label, filter){
  alert("label="+label+" and filter="+filter);
  return false;
}

At first I thought it would be anything like the text inside the HTML generated for each list item. But when debugging it I saw the alert said that the label was something like my.package.SomeValueObject@123456 (which is obvously the Java object toString on each item in the list).

You need to define the itemLabel property on the selectItems which is inside the selectManyMenu to generate a proper text value used by the standard filtering mechanisme. As far as I could figure out that is the only reason why you have to put itemLabel there. In the documentation itemLabel is specified before explaining filtering which is confusing.

And as far as I know the itemValue defaults anyhow to just the object value, so I believe following from the documentation is redundant.

itemValue="#{player}"

Hope it helps anyone :.)

Answer 3

I resolve this problem with autocomplete component. Primefaces autocomplete component with dropdown="true" property works like one menu.