Skip to content

Início / Optitravel / Framework V2

Auto-complete

Input com preenchimento automático utilizando AJAX.

⚠️ Include necessário apenas em pop-ups:

<script type="text/javascript" src="/optitravel/includes/js/widgets_by_class.js"></script>

🔹 Exemplo simples de Auto-complete

<input type="text" 
    class="auto-complete auto-complete-cod"  
    opti-url="/optitravel/online/backoffice/modules/common/getIvas.php?content=vat_code" 
    opti-type-related="name" >

Este campo fará uma chamada AJAX para o URL indicado e preencherá com base nos dados retornados.

🔸 Exemplo de Auto-complete associado

Dois campos interligados por código e descrição (ex: código de cliente e nome):

<!-- Campo 1: Código -->
<input type="text" class="auto-complete auto-complete-cod"
    opti-related="auto-complete-desc" 
    opti-url="/optitravel/online/backoffice/modules/common/getClients.php?content=cod" 
    opti-type-current="cod" 
    opti-type-related="name">

<!-- Campo 2: Nome -->
<input type="text" class="auto-complete auto-complete-desc" 
    opti-related="auto-complete-cod" 
    opti-url="/optitravel/online/backoffice/modules/common/getClients.php?content=nome" 
    opti-type-current="name"
    opti-type-related="cod">

Quando o utilizador preenche um dos campos, o outro é automaticamente atualizado com o valor correspondente.

🔁 Trigger de evento change

É possível disparar o evento change ao selecionar um valor da lista. Para isso, adiciona a classe:

auto-complete-triggerChange

⚠️ Em casos de auto-complete com associação, essa classe deve ser aplicada apenas a um dos campos.

✅ Notas

  • Os atributos opti-url, opti-type-current, opti-type-related, e opti-related controlam o comportamento do auto-complete.
  • O script widgets_by_class.js trata do funcionamento automático com base nas classes.

Exemplo completo:

<input type="text" class="auto-complete auto-complete-cod auto-complete-triggerChange"
    opti-related="auto-complete-desc" 
    opti-url="/optitravel/online/backoffice/modules/common/getClients.php?content=cod" 
    opti-type-current="cod" 
    opti-type-related="name">

<input type="text" class="auto-complete auto-complete-desc" 
    opti-related="auto-complete-cod" 
    opti-url="/optitravel/online/backoffice/modules/common/getClients.php?content=nome" 
    opti-type-current="name"
    opti-type-related="cod">

↑ (Última atualização: 04/06/2025)