PRO
widget.js

Widget de autocompletado de empresa

Componente embebible para formularios: busca por nombre o CUI, selecciona la empresa y rellena los campos del cliente.

https://demoanaf.ro/widget.js
Vanilla JS, Shadow DOM, sin React

Descubrimiento

Busca empresas por nombre a través del índice ONRC y acepta un CUI numérico directamente.

Autocompletado

Rellena campos comunes mediante los atributos `name`, `id` o `data-demoanaf-target`.

Mapeo

Permite el mapeo explícito usando los selectores del sitio que integra el widget.

Demo en vivo

El widget de abajo rellena el formulario de prueba al seleccionar una empresa.

actual widget.js

Cargando widget…

Integración automática

Los campos comunes como `company_name`, `cui`, `company_address`, `locality`, `county` se detectan automáticamente dentro del mismo formulario.

JavaScript
<form>
  <div data-demoanaf-cui></div>

  <input name="company_name" />
  <input name="cui" />
  <input name="registration_number" />
  <input name="company_address" />
  <input name="locality" />
  <input name="county" />
</form>
<script src="https://demoanaf.ro/widget.js" async></script>

Mapeo explícito

Para checkouts y CRMs con nombres de campo personalizados, pasa los selectores en `fields`.

JavaScript
<div id="demoanaf-company"></div>

<input id="billing-company" />
<input id="billing-cui" />
<input id="billing-address" />

<script src="https://demoanaf.ro/widget.js"></script>
<script>
  DemoANAF.init('#demoanaf-company', {
    fields: {
      name: '#billing-company',
      cui: '#billing-cui',
      address: '#billing-address'
    }
  });
</script>

Configuración de apariencia y detalle

Por defecto el widget muestra la tarjeta de empresa tras la selección. Para checkouts compactos, `showDetails: false` deja solo el autocompletado + autorrelleno. `compact` y `badge` son opcionales.

JavaScript
DemoANAF.init('#demoanaf-company', {
  showDetails: false,
  compact: true,
  placeholder: 'Caută firma pentru facturare...',
  badge: {
    enabled: true,
    text: 'Firmă verificată'
  },
  styles: {
    primary: '#003B73',
    primarySoft: '#E6EEF5',
    background: '#ffffff',
    text: '#111827',
    border: '#d1d5db',
    focusBorder: '#003B73',
    radius: '8px'
  }
});

Payload normalizado

La normalización está desactivada por defecto. Cuando se activa, el widget escribe un JSON canónico en un campo oculto existente o creado nuevo en el formulario.

JavaScript
DemoANAF.init('#demoanaf-company', {
  normalize: {
    enabled: true,
    name: 'demoanaf_company_json'
  }
});

// Creează sau completează:
// <input type="hidden" name="demoanaf_company_json">

Evento de cliente

Tras el rellenado, el widget emite `demoanaf:prefill` con la empresa normalizada y la lista de campos rellenados.

JavaScript
document
  .querySelector('#demoanaf-company')
  .addEventListener('demoanaf:prefill', (event) => {
    console.log(event.detail.company);
  });