Использовать автозаполнение в масках с вложенными вводами

Question

Я хотел бы сделать маскированное поле ввода с автозаполнением. В моем примере у меня есть поле со номерами статей _.___.___. У меня также есть список часто используемых статей. Пользователь может выбрать существующие номера статей из списка и может добавлять новые артикуляторы.

Как я могу объединить эти два компонента?

Спасибо за вашу помощь

LEPO

Answer 1

Для достижения этой цели у вас есть две возможности: Создание пользовательского компонента или установить inputmask вручную с помощью JQuery. Я реализовал второй метод так:

1. использовать обычный автозаполнения виджет

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

2. Активировать Inputmask с помощью этой небольшой Javascript

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

(3. Убедитесь, что вы включили библиотеку jquery inputmask :)

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

Хотя это решение делает то, что он должен делать, я думаю, что пользовательский компонент будет более чистым способом. Надеюсь, мой фрагмент поможет вам в любом случае.