1 Reply Latest reply: Dec 16, 2011 12:50 PM by Emir Calabuch RSS

How to make items serachable in f:selectItems

kamal_khadka Newbie

I have the following in my code:




<ui:composition>
  <rich:modalPanel>
   <h:form id="productsComboPanelForm">
      <s:div id="panelDiv">

        <h:panelGrid columns="1" cellspacing="3">
          <s:decorate id="" template="/layout/edit.xhtml">
            <ui:define name="label">Products</ui:define>
            <h:selectOneMenu value="#{bean.productId}" required="true"
              requiredMessage="Must Choose product" style="width:370px">
              <f:selectItems value="#{bean.productsComboList}" />
            </h:selectOneMenu>
          </s:decorate>
          <s:div style="text-align:right">
            <h:commandButton id="submit" name="submit" style="width:120px;font-size:15px;"
              value="SUBMIT" ... />
          </s:div>
        </h:panelGrid>
...  </rich:modalPanel>
</ui:composition>




I want to make the selectItems searchable. If the user decides to just type to find the product of interest they can type on keyboard and that product should be displayed if available. Reason for this is we have a long list of products and going through them by scrolling down is not easy.


If this solution is bad what would be the better alternative


  • 1. Re: How to make items serachable in f:selectItems
    Emir Calabuch Newbie

    <h:selectOneMenu> becomes a normal combobox in the rendered page, so it depends on how the browser handles comboboxes. You cannot control how the combobox works.


    So, you can either use an autocompletion control (such as <rich:suggestionBox/>) or you create your own (one simple solution is to leave the page as is and convert the combobox to a jQuery UI Autocomplete component directly from javascript). This has the advantage of leaving the combobox as is in case the user's browser does not support javascript.