Time for action – using SelectOneMenu with editable and filter features

Let's look at how to create a drop-down menu with editable options, by performing the following step:

1. Create a SelectOneMenu drop-down list using the editable and filter attributes:

   <p:selectOneMenu value="#{selectionController.selectedOption}" effect="fade" editable="true" filter="true" filterMatchMode="startsWith">  
       <f:selectItem itemLabel="Select One" itemValue="" />
       <f:selectItem itemLabel="One" itemValue="One" />
       <f:selectItem itemLabel="Two" itemValue="Two" />
       <f:selectItem itemLabel="Three" itemValue="Three" />  
   </p:selectOneMenu>

What just happened?

As we have set the editable attribute to true, we can select an existing option, select and edit an existing option, or write an entirely new option. When you click on the drop-down list icon, it will display the list of options along with a filter input textbox. When you type in the filter text, options will be filtered...