Use autocomplete in masked-input primefaces

Question

I'd like to make a masked input field with autocompletion. In my example i have a field with article numbers _.___.___. I have also a list of often used articles. The user can select existing article numbers from the list and can add new articlenumbers.

How can i combine these two primefaces components?

Thanks for your help

Lepo

Answer 1

To achieve this you have two possibilities: Create a custom component or set the inputmask manually via jQuery. I implemented the second method this way:

1. Use the normal Autocomplete Widget

   <h:form id="myPanel">
     <p:autoComplete id="number" value="#{myBean.number}" completeMethod="#{myBean.complete}" />
   </h:form>
   

2. Activate Inputmask via this little Javascript

   <script>
   //<![CDATA[
   $(document).ready(function() {
       $(':input[id="myPanel:number_input"]').inputmask("mask", {"mask": "(999) 999-9999"});
   });
   //]]>
   </script>
   

(3. Make sure you have included the inputmask jquery library:)

    <script src="jquery.inputmask.js" type="text/javascript"/>

Although this solution does what it should do, i think the custom component would be the more cleaner way. Hope my Snippet helps you anyway.