how to search a primefaces picklist

Question

I have a Primefaces picklist, and I want to be able to click on the source list, or select one of the items in the source list, enter a character, say 'R' and have my picklist control navigated to that point in my picklist where my list of 'R's start. Essentially, I would like to search the picklist by letter/character. I'm using Primefaces version 3.3.1. Can someone please let me know if this is possible, and if so, how I can go about it? Thanks in advance.

Sonic Sonic · Accepted Answer · 2013-01-24T22:45:42

https://forum.primefaces.org/viewtopic.php?t=24621

You can update the picklist via an actionListener in your Backing Bean, something like that:

public class PickListFilter {

    private List<String> sourceList; //Getter, Setter
    private List<String> targetList; //Getter, Setter

    private String filterChar; //Getter, Setter
    //Init Lists

    public void filterList() {

        filterChar = FacesContext.getCurrentInstance().getExternalContext().
                         getRequestParameterMap().get("filterChar");


        List<String> filteredList = new ArrayList<String>();
        for (String currentString : targetList) {
            if (currentString.startsWith(letter)) filteredList.add(currentString);
        }
        targetList = filteredList;
    }    
}

To fire this ActionListener, you can use the a RemoteCommand. This RemoteCommand will be triggered by a little jQuery Script, which listens for keystrokes.

<p:remoteCommand name="filterList" update="myPickList" action="#{pickListFilter.filterList}">
</p:remoteCommand>

The jQuery script should be something like that:

<script>
jQuery("#picklist").keypress(function(e) {
    command([{name:'filterChar',value: e.keyCode}]); //Save key to backing bean, TODO: Convert KeyCode to Char
    filterList();
});
</script>

This is conceptual what needs to be done. This is just a possible solution. Hope this helps you.

how to search a primefaces picklist

1 Answers